如何限制 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。问题是如果我们限制 ChildArray，<h4>{{pitem... 就会在那里。我也想隐藏

例如，这里有三个父项 p1、p2、p3，p1 有 4 个子项，p2 和 p3 有 6 个和 10 个子项。因此，将 ChildArray 限制为 8，然后将显示 p1 的 4 个项目、p2 的 4 个项目。我将根据解决方案在单击 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

正如评论中'digit'所说，我添加了这段代码。

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

如何限制 ng-repeat 中的迭代

How to limit iterations in ng-repeat

javascript

angularjs

angularjs-ng-repeat

angularjs-limitto