AngularJS和ngRepeat - 每n次重复插入一个额外的元素

Question

我正在尝试创建一个结构,其中每7个重复的div有一个额外的div插入.这个div必须属于父级,而不是其中一个重复div的子级.

改变类是不够的,整个内容将是不同的,完全不同的ngShow逻辑将与额外的div一起使用.

例如:

<div id="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="special-child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="special-child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="special-child"></div>
</div>

该示例使用特定数量的div,ngRepeat可以是任何数字.同样重要的是,ngRepeat的最后结果是在它之后放入一个额外的div,即使它不是7的精确倍数.

我正在使用的当前ngRepeat逻辑是:

<div id="parent">
  <div class="child" ng-repeat="o in data"></div>
  <div class="special-child"></div>
</div>

但这不能正常工作,因为额外的div只在所有重复的div之后插入一次.

用工作示例更新

<div id="parent">
  <div class="child" ng-repeat-start="o in data"></div>
  <div class="special-child" ng-if="( $index + 1 ) % 7 == 0 || $last" ng-repeat-end></div>
</div>

此解决方案需要AngularJS 1.2+

Answer 1

你需要一些接近这个的东西:

<div ng-repeat="o in data">
  <div class="child"></div>
  <div ng-if="$index % 7 == 0" class="special-child"></div>
</div>