How to wrap parts of an ngRepeat

Question

How can one, if at all possible, do the following:

<ul>
<li ng-reapeat="a in c"></li>
</ul>

with an output like this:

<ul>    
    <div>        
        <li></li> <--- from a to b (say first till 3rd element)        
        <li></li>
        ...
    </div>    
    <div>
        <li></li> <--- from b to c (4th element till end)
        <li></li>
        ...
    </div>
</ul>

Or even multiple <ul></ul> blocks. First one closing at a designated index, second one opening and continuing until the end.

possible duplicate of [how to split the ng-repeat data with three columns using bootstrap](http://stackoverflow.com/questions/21644493/how-to-split-the-ng-repeat-data-with-three-columns-using-bootstrap) — m59, Sep 21 '14 at 00:45

alecxe · Accepted Answer · 2014-09-10T13:05:51.760

2

What about slicing the array (probably not an "angular way"), for example

<ul>
  <div> 
    <li ng-repeat="a in c.slice(0, 3)"></li>
  </div>

  <div> 
    <li ng-repeat="a in c.slice(3)"></li>
  </div>
</ul>

edited Sep 10 '14 at 13:05

answered Sep 10 '14 at 12:47

alecxe

462,703
120
1,088
1,195

Most efficient answer. Thanx. – Radu Andrei Sep 10 '14 at 13:14

score 1 · Answer 2 · answered Sep 10 '14 at 12:48

1

General idea, you should be able to get what you want using this pattern

<ul>
  <li ng-repeat-start="a in c" ng-show="$index<3"></li>
  <li ng-repeat-end ng-show="$index>=3"></li>
</ul>

answered Sep 10 '14 at 12:48

Rickard Staaf

2,650
2
14
14

score 1 · Answer 3 · answered Sep 10 '14 at 12:49

1

Try this:

I think you need multiple ul blocks.

<ul>    
  <div ng-reapeat="a in c">        
    <li ng-if="$index<3"></li> 
  </div>    
</ul>


 <ul>    
  <div ng-reapeat="a in c">        
    <li ng-if="$index>2"></li> 
  </div>    
 </ul>

Hope it helps...!

answered Sep 10 '14 at 12:49

Alagarasan M

907
8
16

Most likely a valid answer. Will try it out comparing the other answers as well. – Radu Andrei Sep 10 '14 at 12:59

How to wrap parts of an ngRepeat

3 Answers3