Angular Js - How To Add Extra Div In Ng-repeat

I have an array a=[1,2,3,4,5,6]. Using ng-repeat on this array, I am creating 6 divs. Please refer to this plunker Is there any way to add one more div after each row. So after 3

Solution 1:

Let's try ng-repeat-start & ng-repeat-end.

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

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

plnkr demo

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

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

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=====--><Anyng-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 --><footerng-repeat-end></footer><!--====end of repeater range=====-->

Solution 2:

The ng-repeat-start and ng-repeat-end syntax was introduced for this exact purpose. See the documentation http://docs.angularjs.org/api/ng/directive/ngRepeat

So you'll do something like:

<divng-init="a = [1,2,3,4,5,6]"><divclass="example-animate-container"><divclass="square"ng-repeat-start="friend in a">
   {{$index}}
  </div><divng-repeat-end>Footer</div></div>

Solution 3:

You can use a empty div as a container for your repeat. And then only render the child element's as squares (or what ever you want). This way, your extra div will be a sibling and not a child.

See my example: http://plnkr.co/edit/xnPHbwIuSQ3TOKFgrMLS?p=preview

Solution 4:

take a look at this plunker here, could it be your solution? i don't understand really well your problem because i think it's better if instance your array in an external js file, but other than that take a look here plunker