AngularJS ng-repeat rows/ul

Question

I have a JSON array with various objects and I want to show these objects in the HTML using ng-repeat, but as follows:

<ul>
    <li>object 1</li>
    <li>object 2</li>
    <li>object 3</li>
    <li>object 4</li>
</ul>
<ul>
    <li>object 5</li>
    <li>object 6</li>
    <li>object 7</li>
    <li>object 8</li>
</ul>

Basically I want to show only 4 items per row (ul) How can I do that?

Thanks!

Answer 1

You can use the filter limitTo

ng-repeat="item in items | limitTo:4"

UPDATE:This should work

<ul ng-repeat="item in arr" ng-if="$index%4==0">
  <li ng-repeat="item in arr|limitTo:4:$index" >
    {{item}} 
  </li>
</ul>

Plnkr

Answer 2

Try this sample out, In your controller:

var list = {'1','2','3','4','5','6','7','8','9','10','11','12','13','14','15'};

// Using lodash
var chunkedList = _.chunk(list, 4);

In your HTML:

<ul ng-repeat="items in chunkedList">
 <li ng-repeat="item in items">Object {{item}}</li>
</ul>