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

【问题标题】：Using ng-repeat and limitTo to limit the number of visible items displayed使用 ng-repeat 和 limitTo 限制可见项目的显示数量
【发布时间】：2013-10-25 23:39:33
【问题描述】：

我正在尝试将我的结果集限制为固定数字。我可以将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

【解决方案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

【讨论】：

这不是一回事，因为过滤器从 DOM 中删除项目（如 ng-if），而不仅仅是修改可见性（如 ng-show）。我正在寻找适用于 ng-show 的解决方案。
您想在 DOM 中保留隐藏元素的原因是什么？
不断添加和删除它们很慢。使用 ng-show 过滤体验是即时的，使用 ng-if 在显示更新结果之前有轻微的打嗝。
我创建了一个 plunker。 plnkr.co/edit/TwdanjywAzUN4Oqcn06h?p=preview 你能否告诉我“在显示更新结果之前出现轻微的打嗝”是什么意思。您是对的，在 dom 中添加和删除元素比显示/隐藏它们要慢。
我在plnkr.co/edit/JGYtnlb4UScemQ8hal1R?p=preview 更新了 plunker，使其具有“排序”和“过滤”功能，这正是我对列表所做的。但是，我无法让 plunker 在我的移动设备上工作，看看它是否真的证明了我所看到的滞后......基本上在 Windows 8 手机上，我使用 ng-if 得到大约 50 毫秒的延迟，并且基本上没有使用延迟ng-show。

【解决方案2】：

也可以这样做：

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

【讨论】：

此方法将 HTML 物理放置到位。如果您有 2000 条记录，则有 2000 个 div 被放入您的 HTML 中但看不到。 ng-if 稍微好一点，因为它会转储 cmets 而不是 html，但最好只使用 limitTo 这样它就不会在文档中打印额外的内容

【解决方案3】：

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

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

Here's a SO link to create custom filters

【讨论】：

是否有不从 DOM 中删除项目的解决方案？我正在寻找适用于 ng-show 的东西。

【解决方案4】：

您可以使用 ng-if 和 $index 来指定 DOM 显示。仍然会生成 ng-if cmets 但不会加载对象，因此性能会得到显着提高。

<div ng-init="your.objects={{},{},{}}; your.max=10">
  <div ng-repeat="object in your.objects" ng-if="$index<your.max">
    {{object}}
  </div>
</div>

【讨论】：