AngularJS 和 ngRepeat - 每 n 次重复插入一个附加元素

Question

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

仅仅改变类是不够的，整个内容会有所不同，另外的div会使用完全不同的ngShow逻辑。

例如：

<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>