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。我将根据解决方案点击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

c = 2

angular有一个<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

前面

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>

如何限制ng-repeat

2 个答案: