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

Using ng-repeat and limitTo to limit the number of visible items displayed

本文关键字：显示 项目数 ng-repeat limitTo 使用      更新时间：2023-09-26

我试图将我的结果集限制为固定数字。我可以将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以使其仅将可见项目计入限制限制的正确方法是什么？

您可以使用：

<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

也可以这样做：

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

有几种方法，也许最可重用的是让您创建自己的"可见"自定义过滤器，该过滤器在您的项目上查找可见属性。然后你可以把它们链起来。

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

这是创建自定义过滤器的 SO 链接

您可以将 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>
相关文章：