如何限制 ng-repeat(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是根据ChildArray中的pcategory过滤的。现在我想ChildArray限制为前 8 次迭代。在 8 个项目之后，我们有一个按钮More Items .问题是如果我们限制子阵列，<h4>{{pitem...就会在那里。我也想隐藏它。

例如，这里有三个父项，比如 p1、p2

、p3，在 p1 中有 4 个子项，p2 和 p3 有 6 个和 10 个子项。因此，将显示 ChildArray 为 8 个，然后显示 p1 的 4 个项目、4 个 p2 项目。我将根据解决方案单击More Items按钮时显示p3。

编辑

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

Angular 有一个limitTo过滤器，用于限制ng-repeat . 如果您还需要应用filter，则可以将其添加到前面limitTo

Answer 2

正如"数字"在评论中所说，我添加了这段代码。

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