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

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

<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


javascript angularjs angularjs-ng-repeat angularjs-limitto
person DhavalR    schedule 31.01.2018    source источник
comment
пытался limitTo: 8   -  person zabusa    schedule 31.01.2018
comment
Возможный дубликат Angular, limitTo и отслеживания по $index   -  person Ved    schedule 31.01.2018
comment
Я не знаю, почему люди проголосовали за закрытие, не прочитав вопрос полностью. Вопрос не только в ограничении ng-repeat. Я хочу ограничить родительский повторитель на основе количества итераций дочернего повторителя. Пожалуйста, взгляните на пример.   -  person DhavalR    schedule 31.01.2018
comment
только что добавил проверку длины childArray в тег h1, если вы также хотите скрыть pItem. ‹h4 ng-if=ChildArray.length › 8›{{pitem}}‹/h4›   -  person digit    schedule 31.01.2018
comment
Я думаю, что ваш вопрос недостаточно ясен, чтобы понять его правильно. Создайте отличный плунжер.   -  person Viplock    schedule 31.01.2018
comment
Я обновил вопрос и добавил ссылку jsfiddle.   -  person DhavalR    schedule 31.01.2018
comment
@Viplock: я добавил jsfiddle.   -  person DhavalR    schedule 31.01.2018

Ответы (2)


arrow_upward
1
arrow_downward 

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

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

person zabusa    schedule 31.01.2018
comment
limitTo :8 не стал бы прятать {{pitem}} - person DhavalR; 31.01.2018

arrow_upward
0
arrow_downward

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

<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>
person DhavalR    schedule 01.02.2018