首页 文章

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

提问于
浏览 次
46

我试图将结果集限制为固定数字 . 我可以将 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 的正确方法，以便它只计算可见项目的限制限制？

javascript angularjs angularjs-ng-repeat

4 回答

  • 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

    回复于
  • 15

    它也可以这样做：

    <div ng-repeat="item in items" ng-show="$index<50">
    <p>item.id</p>
</div>
    回复于
  • 1

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

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

    Here's a SO link to create custom filters

    回复于
  • 68

    您可以使用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>
    回复于

相关问题