CODEWITHSUNDEEP
javascripthtmlangularjs
Navi Oilab
Navi Oilab

Reputation: 63

AngularJS Parent and child looping with pagination

How would I possibly loop the parent and child with next page implementation. I want my child to be in the next page with the copy of parent div data which I have set the child items limit to 5.

HTML:

<div ng-repeat="parent in parent.items track by $index">
    {{parent.data1}}
    <div ng-repeat="child in parent.child | startFrom:$index*5 | limitTo : 5">
        {{child.data1}}
    </div>
    Page {{$index}}
</div>

JavaScript:

parent.items = [];
var lineItems = item.child.length;
var totalchildpage = Math.ceil(childItems / 5);

for (var f = 1; f <= totalchildpage; f++) {
    parent.items.push(angular.copy(parent.items));
}

I want my result to this:

<div>
 parent 1
   <div>
     child1
   <div>
   <div>
     child2
   <div>
   <div>
     child3
   <div>
   <div>
     child4
   <div>
   <div>
     child5
   <div>
Page 1
</div>

<div>
parent 1
   <div>
     child6
   <div>
Page 2
</div>

<div>
parent 2
   <div>
     child1
   <div>
Page 1
</div>

Upvotes: 0

Views: 124

Answers (1)

georgeawg
georgeawg

Reputation: 48968

Specify the index at which to begin limitation using the optional second parameter of the limitTo filter: 

<div ng-repeat="parent in parent.items">
    {{parent.data1}}
    ̶<̶d̶i̶v̶ ̶n̶g̶-̶r̶e̶p̶e̶a̶t̶=̶"̶c̶h̶i̶l̶d̶ ̶i̶n̶ ̶p̶a̶r̶e̶n̶t̶.̶c̶h̶i̶l̶d̶ ̶|̶ ̶s̶t̶a̶r̶t̶F̶r̶o̶m̶:̶$̶i̶n̶d̶e̶x̶*̶5̶ ̶|̶ ̶l̶i̶m̶i̶t̶T̶o̶ ̶:̶ ̶5̶"̶>̶
    <div ng-repeat="child in parent.child | limitTo : 5 : $index*5">
        {{child.data1}}
    </div>
    Page {{$index}}
</div>

For more information, see

Upvotes: 1

Related Questions