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!
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>
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>
Didn't test but give it a try:
<ul ng-repeat="n in getNumber(number)">
<li ng-repeat="item in items | limitTo:4:n*4">object 1</li>
</ul>
JS
$scope.number = Math.round(items.length/4);
scope.getNumber = function(num) {
return new Array(num);
}
The basic idea is to chunk your array to multidimensional array, and then ng-repeat it twice with nested structure.
If you would like to change the chunk number, you may just change it to any integers you like.
Live demo is here.
<body ng-app="myApp" ng-controller="MainCtrl as ctrl">
<ul ng-repeat-start="chunk in ctrl.chunkList">
<li ng-repeat="item in chunk">{{item}}</li>
</ul>
<hr ng-repeat-end/>
</body>
angular
.module('myApp', [])
.controller('MainCtrl', [function() {
var self = this;
var listLength;
var groupNum;
var i;
self.list = [
'item1', 'item2', 'item3', 'item4', 'item5',
'item6', 'item7', 'item8'
];
listLength = self.list.length;
groupNum = (listLength % 4 === 0)? listLength / 4 : Math.ceil(listLength / 4);
self.chunkList = [];
for (i = 0; i < groupNum; i++) {
self.chunkList[i] = self.list.slice(i * 4, (i + 1) * 4);
}
}]);
Also notice that if you there's no need for other elements in the loop, you can just remove ng-repeat-start and ng-repeat-end and use ng-repeat directly instead.
<body ng-app="myApp" ng-controller="MainCtrl as ctrl">
<ul ng-repeat="chunk in ctrl.chunkList">
<li ng-repeat="item in chunk">{{item}}</li>
</ul>
</body>
This is approach is similar to @Shivas Jayram's, but without the need for underscore library.
