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

发布时间：2020-12-17 07:37:37 所属栏目：安全来源：网络整理

导读：我试图创建一个结构,每7个重复的div有一个额外的div插入.这个div必须属于父母,而不是一个重复的div的孩子. 只要改变课程是不够的,整个内容将会有所不同,完全不同的ngShow逻辑将与附加的div一起使用. 所以例如： div id="parent" div class="child"/div div c

我试图创建一个结构,每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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!