angularjs 中 ng-repeat 和 collection-repeat 之间的区别

<ion-item ng-repeat="item in items" >
    ...
</ion-item>

<ion-item collection-repeat="item in items">
    ...
</ion-item>

collection-repeat不是

Angularjs的一部分。据我所知，它来自Ionic Framework。正如文档所说collection-repeat被创建为使用而不是ng-repeat因为它可能更适合大量项目。

collection-repeat允许应用程序显示大量项目列表 性能高于ng-repeat

Collection Repeat是Ionic用于滚动巨大列表的黄油平滑解决方案。 collection-repeat可用于大型项目列表，并且在处理大型数据集时具有高性能。它仅呈现到当前可见的项数中。这意味着在可容纳八个项目的手机屏幕上，只会呈现与当前滚动位置匹配的八个项目。

ng重复角度核心模块的一部分。ngRepeat 指令实例化集合中每个项一次模板。每个模板实例都有自己的范围，其中给定的循环变量设置为当前集合项，$index设置为项索引或键。

根据用例，您可以使用任何选项。但是，如果您将离子框架用于移动设备，那么我建议您重复收集。

此外，如果需要使用 ng-repeat，建议在服务器端处理数据并逐个部分请求。这样，您就可以在客户端获得高性能和更少的处理。另一种选择是将大型数据集存储在客户端浏览器中，然后使用该数据集处理数据。

如果是 1000 elements，我强烈建议collection-repeat。它更灵活，并且可以渲染尽可能多的items，collection可以容纳屏幕。其余的都是动态加载的，您甚至可以使用 200K 集合，它也会顺利进行。 ng-repeat渲染collection项，直到完成，因此性能会差得多。

所以collection-repeat它是我的朋友。

祝你的发展好运！

---

注意：collection-repeat不是角芯的一部分，请在此处查看更多信息：http://ionicframework.com/docs/api/directive/collectionRepeat/

据

我了解，ng-repeat适用于少量项目，而收集重复非常适合用于大量项目。它实际上是关于在设备中查看/渲染时的性能。为了更好地理解，你可以看这个视频，它真的帮助我理解了它。

简单来说 -Ionic有一个集合重复指令，当你需要显示非常大的列表时，你可以使用它来代替ng-repeat。

它是如何工作的？深）

该模块分为两个组件，$repeatFactory（定义帮助程序函数的服务）和 collectRepeat（大多数逻辑所在的指令）。

从工厂中得到的最重要的收获是重复管理器方法。它是在指令的链接函数的开头实例化的构造器，负责维护滚动视图的状态。

在创建 repeatManager 的新实例时，还需要生成一个新对象（或映射），以便为已包含、呈现且其范围已更新的所有项提供参考。还必须注册封闭的父元素，以便我们以后可以将其高度更改为集合中所有项的高度。

接下来，在集合上设置一个监视，并在集合更改时调用匿名函数。这是大部分逻辑所在的位置。它分为三个步骤。

• 包含并呈现集合的第一个元素，以便可以注册每个单独项的高度和其他属性，调整父div 的高度，并计算视区的大小
确定视口
• 大小后，循环并渲染视口内可容纳的 n 个项目（加上一些额外的平滑度）。
• 在 .scroll-content 上设置一个"scroll"事件侦听器，以返回集合第一个元素的 scrollHeight，并仅呈现必要的元素。

下面的代码中提供了一些额外的花絮（也称为注释）。如果您在遵循上述概要时遇到问题，它应该有助于减轻一些困惑。该模块也可以在github上使用。

GitHub

差异 - 工作示例

在这里编码