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>

那个示例使用了特定数量的

元素，而ngRepeat可以是任何数量。同样重要的是，即使不是7的倍数，ngRepeat的最后一个结果也会放置在额外的

元素中。

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

<div id="parent">
  <div class="child" ng-repeat="o in data"></div>
  <div class="special-child"></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+ 版本。

- Matt McDonald

Answer 1

你需要像这样的东西：

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

- Matheus Lima

---

有没有不需要重复父元素的方法？我希望这只是最后的选择，因为如果我需要在中间添加一个额外的div，那就意味着需要大量的CSS更改！ - Matt McDonald

回答我的问题，ng-repeat-start和ng-repeat-end似乎是答案（AngularJS 1.2+）。我在子元素上放置了ng-repeat-start，在特殊子元素上放置了ng-repeat-end，并使用了建议的ng-if变体，这样就可以得到结果而不重复父元素！ - Matt McDonald