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

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 文档以获取有关 filter 过滤器的更多信息。 http://docs.angularjs.org/api/ng.filter:filter