I am trying to use ng-repeat to display the array of numbers. How to achieve this if I want it to be in different containers, for example in different ul
? Also, each ul
can only contain at most 2 li
.
$scope.numbers = [1,2,3,4,5]
<div ng-controller="myController">
<ul>
<li>1</li>
<li>2</li>
</ul>
<ul>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li>5</li>
</ul>
</div>
You should split that numbers
array into chunks, then use a nested ng-repeat
.
JavaScript:
var i, l = $scope.numbers.length;
$scope.chunks = [];
for ( i = 0; i < l; i += 2) {
$scope.chunks.push( $scope.numbers.slice(i, i + 2) );
}
HTML:
<div ng-controller="myController">
<ul ng-repeat="chunk in chunks">
<li ng-repeat="number in chunk">{{ number }}</li>
</ul>
</div>
See it here in action.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With