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

我试图将结果集限制为一个固定的数字。我可以将

limito

与

ng repeat

一起使用，但这会限制项目，而不管其当前可见性如何，并从DOM中删除项目。我希望在DOM中保留所有内容的同时，限制为若干可见项

这是我的当前代码。我的目标是始终在列表中显示不超过50个项目，即使

项目

包含500个项目

<div ng-repeat="item in items | limitTo: 50">
  <div ng-show="item.visible">
    <p>item.id</p>
  </div>
</div>

item.id

---

这将最初限制为50个项目，但如果我过滤列表（通过修改某些项目上的item.visible），列表将不会显示50-500范围内的项目，而是显示少于50个项目。什么是限制

ng repeat

的正确方法，以便它只对限制限制中的可见项进行计数？

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

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

您可以使用：

<div ng-repeat="item in items | filter:{visible: true} | limitTo: 50">
    <p>{{item.id}}</p>
</div>

{{item.id}

filter:{visible:true}

将返回所有可见项的列表

您可以查看angularjs文档以了解有关过滤器的更多信息。

---

也可以这样做：

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

item.id

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

{{object}}

这不是一回事，因为过滤器从DOM中删除项目（如ng if），而不是仅仅修改可见性（如ng show）。我正在寻找一个与ng-show一起使用的解决方案。您希望在DOM中保留隐藏元素的原因是什么？不断地添加和删除它们是很慢的。使用ng show，过滤体验是即时的，如果在显示更新结果之前出现轻微的停顿，则使用ng。我创建了一个plunker。你能告诉我你所说的“更新结果显示前轻微的打嗝”是什么意思吗。你说得对，从dom中添加和删除元素比显示/隐藏元素要慢。我在更新了plunker，使其具有“排序”和“筛选”功能，这就是我对列表所做的。然而，我无法让plunker在我的移动设备上工作，看看它是否真的显示了我所看到的滞后。。。基本上，在Windows8手机上，我使用ng-if可以获得大约50毫秒的延迟，而使用ng-show基本上没有延迟。有没有一种解决方案不从DOM中删除项目？我正在寻找与ng-show一起工作的东西。此方法实际上将HTML放在适当的位置。如果你有2000条记录，那就是在HTML中放入了2000个div，但没有看到

ng if

稍微好一点，因为它会转储注释而不是html，但还是最好只使用limito，这样它就不会在文档中打印额外的内容