AngularJS和ngRepeat – 每n个重复插入附加元素

前端之家收集整理的这篇文章主要介绍了AngularJS和ngRepeat – 每n个重复插入附加元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图创建一个结构,每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

你需要接近这个的东西:
<div ng-repeat="o in data">
  <div class="child"></div>
  <div ng-if="$index % 7 == 0" class="special-child"></div>
</div>

猜你在找的Angularjs相关文章