Как ограничить итерации в ng-repeat

Question

Я хочу ограничить итерации в ng-repeat между диапазоном. Сейчас я попытался добавить фильтр для диапазона, но, как мое требование, его немного не хватает. Вот мой HTML.

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

Как вы видете, ChildArray фильтруется на основе pcategory в ChildArray, Теперь я хочу ограничить ChildArray до первых 8 итераций. Ну после 8 пунктов, у нас есть кнопка More Items, В чем проблема, если мы ограничим ChildArray, <h4>{{pitem... будет там. Я тоже хочу это скрыть.

Например, вот три родительских элемента, скажем, p1, p2, p3 и в p1, имеющих 4 дочерних элемента, и p2 и p3, имеющих 6 и 10 дочерних элементов. Таким образом, если ограничить ChildArray 8, то будут показаны 4 элемента p1, 4 элемента p2. Я покажу p3 при нажатии More Items кнопка на основе решения.

РЕДАКТИРОВАТЬ

p1, p2 и p3, имеющие дочерние элементы, как указано ниже, как указано выше.

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

С помощью limitTo:8 покажет ниже результат

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

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

Где требуемый результат

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

Вы можете видеть, что p3 там нет. Вот jsfiddle

Answer 1

Как сказано в комментарии "цифра", я добавил этот код.

<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>

Answer 2

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

угловой имеет limitTo фильтр для ограничения ng-repeat, если вам также необходимо применить filter Вы можете добавить его перед limitTo