如何在AngularJS的ng-repeat列表中每隔4行插入广告横幅？

没问题，这在AngularJS里有几种实用的实现方式，我给你分享两个常用方案：

方案一：使用ng-if结合$index判断 #

AngularJS的ng-repeat会自动暴露一个$index变量（从0开始计数），我们可以利用它来判断是否到达第4行的位置，然后插入广告。

代码示例：

<div class="wrapper">
  <div class="content" ng-repeat="row in rows">
    {{row.someData}}
    <!-- 每第4行后显示广告 -->
    <div class="ad-banner" ng-if="($index + 1) % 4 === 0">
      这里放你的自定义广告内容
    </div>
  </div>
</div>

说明：因为$index从0开始计数，所以用$index + 1转换成从1开始的序号，当这个值对4取模等于0时，就说明当前是第4、8、12...行，此时自动渲染广告横幅。

方案二：使用ng-repeat-start和ng-repeat-end（更语义化） #

如果想把数据行和广告作为一个逻辑组，或者让广告块和数据行同级，可以用ng-repeat-start和ng-repeat-end来实现，结构会更清晰：

广告与数据行同级的写法 #

<div class="wrapper">
  <div class="content" ng-repeat-start="row in rows">
    {{row.someData}}
  </div>
  <div class="ad-banner" ng-repeat-end ng-if="($index + 1) % 4 === 0">
    这里放你的自定义广告内容
  </div>
</div>

这种写法会让广告div和数据行div处于同一层级，每4个数据行后插入一个独立的广告块。

避免末尾多余广告的优化写法 #

如果你的数据总数刚好是4的倍数，上面的写法会在最后一行后多显示一条广告，这时可以加上!$last判断：

<div class="wrapper">
  <div class="content" ng-repeat-start="row in rows">
    {{row.someData}}
  </div>
  <div class="ad-banner" ng-repeat-end ng-if="($index + 1) % 4 === 0 && !$last">
    这里放你的自定义广告内容
  </div>
</div>

内容的提问来源于stack exchange，提问作者Vikas Kandari