使用ng-repeat和limitTo限制显示的可见项目的数量

我试图限制我的结果集到一个固定的数字。 我可以在ng-repeat使用limitTo ，但是这会限制项目而不pipe当前的可见性，并从DOM中删除项目。 我想限制到一些可见的项目，同时保持在DOM中的一切。

这是我现在的代码。 我的目标是总是在列表中显示不超过50个项目，即使items包含500个项目。

 <div ng-repeat="item in items | limitTo: 50"> <div ng-show="item.visible"> <p>item.id</p> </div> </div> 

这将最初限制为50个项目，但是如果我筛选列表（通过修改某些项目上的item.visible），列表从不显示50-500范围内的项目，而是显示less于50个项目。 限制ng-repeat的正确方法是什么？

Answer 1

您可以使用：

 <div ng-repeat="item in items | filter:{visible: true} | limitTo: 50"> <p>{{item.id}}</p> </div> 

filter:{visible: true}将返回所有可见项目的列表

您可以查看angularjs文档以获取有关filterfilter的更多信息。 http://docs.angularjs.org/api/ng.filter:filter

Answer 2

也可以这样做：

 <div ng-repeat="item in items" ng-show="$index<50"> <p>item.id</p> </div> 

Answer 3

有几种方法，也许最可重用的是你创build自己的“可见”自定义filter，它会查找您的项目上的可见属性。 那么你可以链接他们。

 <div ng-repeat="item in items | visible | limitTo: 50"> 

这里有一个SO链接来创build自定义filter

Answer 4

你可以使用ng-if和$ index来指定DOM显示。 仍然生成ng-if注释，但不会加载该对象，因此可以提高性能。

 <div ng-init="your.objects={{},{},{}}; your.max=10"> <div ng-repeat="object in your.objects" ng-if="$index<your.max"> {{object}} </div> </div>