javascript - 如何限制 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，然后将显示 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

前面