How make diffrent section of ng-repeat data in angularJS

Question

I have some data and display using ng-repeat which print following

data1
data2
data3
data4
data5
data6

but I want to print these data divided by sections. such as

data1    data3    data5
data2    data4    data6

Is it possible in angularjs ?

Answer 1

This is a functionality of css. No need to any angular code. Just put your ng-repeat in <li> inside of <ul> and put a style for <ul> tag columns: 3. You will achieve your requirement.

Example

<ul style="columns:3">
    <li ng-repeat="item in items">{{item}}</li>
</ul>

Answer 2

This can be achieved in multiple ways.

• You can use 3 columns structure to implement this. so after three values it will automatically come down to next line.
• You can achieve this in tour code as well. use an ng-if on "br" tag when $index%3 == 2.

Answer 3

Yes it is possible to structure like that. One way is to format array into a 2D array for proper looping. Check out the Working Fiddle.

Create filter to format your array data:

// Loop every n items filter
App.filter("loopEvery", [function() {
  return function(mainArray, loopEvery) {
    var subArray = [], formattedArray = [];
    angular.forEach(mainArray, function(item, index) {
      subArray.push(item);
      if ((subArray.length == loopEvery) || (index == mainArray.length - 1)) {
        formattedArray.push(subArray);
        subArray = [];
      }
    });
    return formattedArray;
  }
}]);