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>

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

1 个答案: