javascript - Advanced structuring: Surrounding ngRepeated items Angular.js -

javascript - Advanced structuring: Surrounding ngRepeated items Angular.js -

you have array of objects you're iterating over, how surround every (x) elements (element)?

if goal is: to have (element) surrounding every 4 ng-repeated elements? surrounding ng-repeated-elem ng-repeated-elem ng-repeated-elem ng-repeated-elem / surrounding ng-repeated-elem ng-repeated-elem ng-repeated-elem ng-repeated-elem / to have (element) surrounding every 2 groups of 4 ng-repeated elements complicated surrounding ng-repeated-elem ng-repeated-elem ng-repeated-elem ng-repeated-elem / surrounding ng-repeated-elem ng-repeated-elem ng-repeated-elem ng-repeated-elem / / complicated surrounding ng-repeated-elem ng-repeated-elem ng-repeated-elem ng-repeated-elem / surrounding ng-repeated-elem ng-repeated-elem ng-repeated-elem ng-repeated-elem / / normal usage of ng-repeat: <div ng-controller="examplecontrller example" > <div ng-repeat="ex in example.arr"> <span>{{ex.a}}</span> <span>{{ex.b}}</span> </div> </div> would output: <div ng-controller="examplecontrller example" > <div ng-repeat="ex in example.arr"> <span>a</span> <span>b</span> </div> <div ng-repeat="ex in example.arr"> <span>a</span> <span>b</span> </div> <div ng-repeat="ex in example.arr"> <span>a</span> <span>b</span> </div> <div ng-repeat="ex in example.arr"> <span>a</span> <span>b</span> </div> </div> how ng-repeat output this: <div ng-controller="examplecontrller example" > <section> <!-- section surround every (x) ng-repeated elements --> <div ng-repeat="ex in example.arr"> <span>a</span> <span>b</span> </div> <div ng-repeat="ex in example.arr"> <span>a</span> <span>b</span> </div> </section> <section> <div ng-repeat="ex in example.arr"> <span>a</span> <span>b</span> </div> <div ng-repeat="ex in example.arr"> <span>a</span> <span>b</span> </div> </section> </div>

here's way creating array proper grouping , using 2 ng-repeat:

$scope.data2 = (function(data, count) { var arr = []; var len = data.length / count; (var i=0 ; i<len ; i++) { arr.push(data.slice(i*count, (i+1)*count)); } homecoming arr; })($scope.data, 3);

-

<section ng-repeat="group in data2"> <div ng-repeat="item in group"> <span>{{item.a}}</span> <span>{{item.b}}</span> </div> </section>

data original array, , count number of items in each group here's fiddle: http://jsfiddle.net/a9n1e7w5/2/

there's improve way this, works.

javascript angularjs recursion angularjs-ng-repeat