Question

我有一个数组a=[1,2,3,4,5,6]。

在此阵列上使用ng-repeat，我创建了6 divs。

有没有办法在每行之后再添加一个div。所以在3个div之后我想再添加一个div。

我查看了this示例。但他们正在创造一个孩子div。是否可以在ng-repeat

中创建兄弟div

Answer 1

试试ng-repeat-start＆amp; NG-重复端。

<div class="example-animate-container">
  <div class="square" ng-repeat-start="friend in a">
   {{$index}}
  </div>
  <div ng-if="$index % 3 == 2" ng-repeat-end>
    extra div
  </div>
</div>

请注意，自角度1.2.1开始包含ng-repeat-start指令。

plnkr demo

ng-repeat：重复一系列＆＃34;一个＆＃34;父元素

<!--====repeater range=====-->
  <Any ng-repeat="friend in friends">
  </Any>
<!--====end of repeater range=====-->

ng-repeat-start＆amp; ng-repeat-end：使用ng-repeat-start和ng-repeat-end来定义扩展转发器范围的起点和终点

<!--====repeater range start from here=====-->
<Any ng-repeat="friend in friends" ng-repeat-start> 
  {{friend.name}}
</Any><!-- ng-repeat element is not the end point of repeating range anymore-->

<!--Still in the repeater range-->
<h1>{{friend.name}}</h1>

<!--HTML tag with "ng-repeat-end" directive define the end point of range -->
<footer ng-repeat-end>
</footer>
<!--====end of repeater range=====-->

Answer 2

为此目的引入了ng-repeat-start和ng-repeat-end语法。请参阅文档http://docs.angularjs.org/api/ng/directive/ngRepeat

所以你会做类似的事情：

<div ng-init="a = [1,2,3,4,5,6]">

<div class="example-animate-container">
  <div class="square" ng-repeat-start="friend in a">
   {{$index}}
  </div>
  <div ng-repeat-end>Footer</div>
</div>

Answer 3

您可以使用空div作为重复的容器。然后只将子元素渲染为正方形（或任何你想要的东西）。这样，你的额外div将是一个兄弟，而不是一个孩子。

请参阅我的示例：http://plnkr.co/edit/xnPHbwIuSQ3TOKFgrMLS?p=preview

Answer 4

在这里看看这个plunker，这可能是你的解决方案吗？我不太了解你的问题，因为我觉得如果你的数组在外部js文件中实例更好，但除此之外看看plunker

Angular JS - 如何在ng-repeat中添加额外的DIV

4 个答案: