48

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

4

4 回答 4

72

您可以使用：

<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

于 2013-10-26T00:00:01.807 回答
16

也可以这样做：

<div ng-repeat="item in items" ng-show="$index<50">
    <p>item.id</p>
</div>
于 2015-03-27T19:59:35.853 回答
1

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

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

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

于 2013-10-25T23:48:51.530 回答
1

您可以使用 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>
于 2015-06-19T08:01:41.817 回答