AngularJS - how to use ng-repeat in different containers

Question

I am trying to use ng-repeat to display an array of numbers. How to achieve this if I want it to be in different containers, for example, in different ul ? In addition, each ul may contain no more than 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> 

Answer 1

You must split this numbers array into pieces, then use the ng-repeat nested.

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 here in action .