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

时间:2015-03-16 10:09:24

标签: javascript angularjs

我对ng-repeat和collection-repeat

有点困惑

纳克重复

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

集合重复

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

上述两条线都表现不错。

  

如果有任何不同,请告诉我。我也有1000个项目,哪一个更适合这种情况?以及渲染速度和性能状态如何?

5 个答案:

答案 0 :(得分:10)

collection-repeat不属于angularjs。据我所知,它来自Ionic Framework。创建documentation says collection-repeat代替ng-repeat,因为它可能会对大量项目有效。

  

collection-repeat允许应用程序显示大量项目列表   比ng-repeat

更具性能

答案 1 :(得分:4)

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

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

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

此外,如果您需要使用ng-repeat,建议您在服务器端处理数据并逐个请求。通过这种方式,您可以在客户端获得高性能和低处理能力。另一种选择是将大数据集存储在客户端浏览器中,然后使用该数据集处理数据。

答案 2 :(得分:0)

如果是elements,我会强烈推荐collection-repeat。它更灵活,它可以从items中提取尽可能多的collection,因为很多人可以适合屏幕。其余的是动态加载的,你甚至可以使用200k的收集,它也会顺利进行。 ng-repeat呈现collection项目,直到完成为止,因此会给您带来更糟糕的表现。

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

祝你的发展好运!


注意:collection-repeat不是角度核心的一部分,请查看此处了解更多信息:http://ionicframework.com/docs/api/directive/collectionRepeat/

答案 3 :(得分:0)

据我所知,ng-repeat适合用于少量物品和集合 - 重复非常适合用于大量物品。它实际上是关于在设备中查看/渲染的性能。为了更好地理解你可以看到这个video,它真的帮助我理解它们。

答案 4 :(得分:0)

简单字 - Ionic有一个collection-repeat指令,当你需要显示非常大的列表时,你可以使用它而不是ng-repeat。

工作原理如何?(深层次)

该模块分为两个组件:$ repeatFactory(定义了辅助函数的服务)和collectRepeat(大多数逻辑所在的指令)。

工厂最重要的一点是repeatManager方法。它是在指令的link函数的开头实例化的构造函数,负责维护滚动视图的状态。

在创建repeatManager的新实例时,还需要生成新对象(或映射),以便为已经被转换,呈现并且其范围已更新的所有项目提供参考。封闭的父元素也必须进行注册,以便我们以后可以将其高度更改为集合中所有项目的高度。

接下来,在集合上设置监视,并设置匿名函数,以便在集合发生更改时调用。这是大部分逻辑所在的地方。它分为三个步骤。

  • 转换并渲染集合的第一个元素,以便可以注册每个项目的高度和其他属性,调整父div的高度以及计算视口的大小
  • 确定视口的大小后,循环并渲染适合视口内部的n个项目(加上一些额外的平滑度)。
  • 设置&#39;滚动&#39; .scroll-content上的事件侦听器返回集合的第一个元素的scrollHeight,并仅渲染必要的元素。

下面的代码中提供了一些额外的花絮(也称为注释)。如果您在遵循上述概要时遇到问题,它应该有助于缓解一些混乱。该模块也可以在github上找到。

GitHub

差异 - 工作实例

Code Here