AngularJS: How to ng-repeat from specific value

Question

I am trying to create a template that will repeat based on certain value. For example if the total number of pages are 3 and total records are 15 then each page will have 5 records. So essentially it would be a nested ng-repreat.

I create a sample java code

int index = 1;
for(int i =1; i <=5; i++){
   System.out.print("#"+i);
   for(int j = index; j<=14; j++){
      System.out.print("->"+index);
      index++;
      if(j%3==0){
         break;
      }
   }
   System.out.println();
}

These will correctly set number of records of each page. Now I need to first create templates pages based on the how many pages I will need and then inside each page I need a particular number of records. In angular its a bit tricky to write this logic using ng-repeat

<div ng-repeat="i in X" >
   <div>
      <div ng-repeat="j in Y">
         <span></span>
      </div>
   <div>
</div>

Explosion Pills · Accepted Answer · 2017-01-16 21:27:07Z

1

You could split X into chunks of the desired size (5) to make it an array of arrays. Then iterate over it and iterate over the inner array as well.

Assume you want one item per page instead of five:

const items = [1, 2, 3];
$scope.X = items.reduce((chunks, item) => {
  chunks.push([item]);
  return chunks;
}, []);

Now you can use ng-repeat="chunk in X" and you can then use ng-repeat="item in chunk" internally.

answered Jan 16, 2017 at 21:27

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS: How to ng-repeat from specific value

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related