How to limit iterations in ng-repeat

Question

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

Possible duplicate of [Angular, limitTo and track by $index](https://stackoverflow.com/questions/30201046/angular-limitto-and-track-by-index) — Ved, Jan 31 '18 at 07:26
I don't know why people have voted to close without reading full question. Question is not just to limit ng-repeat. I want to limit parent repeater based on number of iterations of child repeater. Please take a look at example. — DhavalR, Jan 31 '18 at 07:49
just added childArray length checking to h1 tag if you want to hide pItem too.
{{pitem}} — digit, Jan 31 '18 at 08:06
I think your question is not clear enough to understand properly. Create a plunker that will be great . — Viplock, Jan 31 '18 at 08:59

zabusa · Answer 1 · 2018-01-31T07:28:46.473

1

<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

edited Jan 31 '18 at 07:28

answered Jan 31 '18 at 07:25

zabusa

2,520
21
25

`limitTo :8` would not hide {{pitem}} – DhavalR Jan 31 '18 at 07:28

score 0 · Accepted Answer · answered Feb 01 '18 at 06:34

0

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>

answered Feb 01 '18 at 06:34

DhavalR

1,409
3
29
57

How to limit iterations in ng-repeat

{{pitem}}

2 Answers2