CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeatangularjs-limitto
DhavalR
DhavalR

Reputation: 1417

How to limit iterations in ng-repeat

I want to limit iterations in ng-repeat between range. Now I have tried adding filter for range, but as my requirement it is bit lacking. Here is my html.

<ul ng-repeat="pitem in ParentArray">
    <h4>{{pitem}}</h4>
    <li ng-repeat="citem in ChildArray|filter:{pcategory:pitem}">{{citem}}</li>
</ul>

As you can see, ChildArray is filtered based on pcategory in ChildArray. Now I want to limit ChildArray to first 8 iterations. Well after 8 items, we have a button More Items. What is the issue is if we limit the ChildArray, <h4>{{pitem... would be there. I want to hide it too.

For example, here are three parent items say p1, p2, p3 and in p1 having 4 child items and p2 and p3 having 6 an 10 child items. So limiting ChildArray to 8 then 4 items of p1, 4 items of p2 would be shown. I will show p3 on clicking More Items button based on the solution.

EDIT

p1, p2 and p3 having child items as below as mentioned above.

p1 - c1 to c4
p2 - c1 to c6
p3 - c1 to c10

Using limitTo:8 would show below result

<li ng-repeat="citem in ChildArray|limitTo:8|filter:{pcategory:pitem}">{{citem}}</li>

p1 - c1 c2 c3 c4
p2 - c1 c2 c3 c4 
p3

Where the required output is 

p1 - c1 c2 c3 c4
p2 - c1 c2 c3 c4

You can see p3 isn't there. Here is the jsfiddle

Upvotes: 1

Views: 116

Answers (2)

DhavalR
DhavalR

Reputation: 1417

As 'digit' said in comment, I added this code.

<ul ng-repeat="pitem in ParentArray" ng-if="(child|limitTo:8|filter:{parent:pitem}).length>0">
    <h4>{{pitem}}</h4>
    <li ng-repeat="citem in ChildArray|filter:{pcategory:pitem}">{{citem}}</li>
</ul>

Upvotes: 0

zabusa
zabusa

Reputation: 2719

<ul ng-repeat="pitem in ParentArray">
    <h4>{{pitem}}</h4>
    <li ng-repeat="citem in ChildArray|filter:{pcategory:pitem} | limitTo: 8">{{citem}}</li>
</ul>

angular has a limitTo filter for limiting the ng-repeat. if you also need to apply the filter you can add it in front of limitTo

Upvotes: 1

Related Questions