Question

我正在尝试将结果集限制为固定数字。我可以将limitTo与ng-repeat一起使用，但这会限制项目，无论其当前可见性如何，都会从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范围内的项目，而是显示少于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文档以获取有关过滤器过滤器的更多信息。 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

有两种方法，也许最可重复使用的方法是创建自己的“可见”自定义过滤器，以查找项目的可见属性。然后你可以链接他们。

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

Here's a SO link to create custom filters

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>

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

4 个答案: