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

Question

我有一個數組a=[1,2,3,4,5,6] 。

在這個數組上使用ng-repeat ，我創建了6個divs 。

請參考這個plunker

有沒有辦法在每一行后再添加一個div 。 所以在3個div之后我想添加一個額外的div 。

我看了一下這個例子。 但他們正在創造一個兒童div 。 是否有可能在ng-repeat中創建一個兄弟div

Answer 1

讓我們試試ng-repeat-start＆ng-repeat-end。

<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演示

ng-repeat：重復“one”父元素的一系列元素

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

ng-repeat-start＆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