Angular JS-如何在ng-repeat中添加额外的DIV [英] Angular JS - How to add extra DIV in ng-repeat

问题描述

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

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

Using ng-repeat on this array, I am creating 6 divs.

请参阅此 朋克

是否可以在每行之后添加一个div.因此，在3个div之后，我想添加一个额外的div.

Is there any way to add one more div after each row. So after 3 divs I want to add one extra div.

我查看了 此 例子.但是他们正在创建子级div.是否可以在ng-repeat

I looked into this example. but they are creating a child div. is it possible to create a sibling div in ng-repeat

推荐答案

让我们尝试ng-repeat-start& ng-repeat-end.

Let's try 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指令.

Please note that ng-repeat-start directive is included since angular 1.2.1.

plnkr演示

ng-repeat :重复一系列一个"父元素的元素

ng-repeat: repeat a series of elements of "one" parent element

<!--====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定义扩展中继器范围的起点和终点

ng-repeat-start & ng-repeat-end: using ng-repeat-start and ng-repeat-end to define the start point and end point of extended repeater range

<!--====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=====-->

这篇关于Angular JS-如何在ng-repeat中添加额外的DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！