我对ng-repeat和collection-repeat有点困惑
<ion-item ng-repeat="item in items" > ... </ion-item>
<ion-item collection-repeat="item in items"> ... </ion-item>
以上两条线都做得很好,也一样。请让我知道,如果有任何差异。我也有1000个项目,所以哪一个是更好的这个场景?以及如何渲染速度和性能状态?
1l5u6lss1#
collection-repeat不是angularjs的一部分。据我所知,它来自Ionic Framework。因为documentation says是用来代替ng-repeat的,因为它可能更好地处理大量的项目。collection-repeat允许应用程序以比ng-repeat更高的性能显示大量项目列表
collection-repeat
ng-repeat
l3zydbqr2#
collection-repeat是Ionic为滚动大型列表提供的平滑解决方案。collection-repeat可用于大型列表项,在处理大型数据集时具有较高的性能。它只将当前可见的项目渲染到DOM中。这意味着在一个可以容纳8个项目的手机屏幕上,只会渲染与当前滚动位置匹配的8个项目。ngRepeat是核心模块的一部分。ngRepeat指令为集合中的每个项目示例化一个模板。每个模板示例都有自己的作用域,其中给定的循环变量被设置为当前集合项目,$index被设置为项目索引或键。根据使用案例,你可以使用任何选项。但是,如果你使用离子框架的移动的,那么我会建议去收集重复。此外,如果您需要使用ng-repeat,建议在服务器端处理数据,并逐部分请求。这样您可以获得高性能,并减少客户端的处理。另一种选择是将大型数据集存储在客户端浏览器中,然后使用该数据集处理数据。
w41d8nur3#
如果有1000个elements,我强烈推荐collection-repeat。它更灵活,它可以从collection渲染尽可能多的items,适合屏幕。其余的是动态加载的,你甚至可以使用200 k集合,它也会很平滑。ng-repeat渲染collection项目,直到它完成。因此性能会差得多。所以collection-repeat是我的朋友。祝您的发展顺利!注意:collection-repeat不是角芯的一部分,请查看此处了解更多信息:http://ionicframework.com/docs/api/directive/collectionRepeat/
elements
collection
items
m3eecexj4#
据我所知,ng-repeat适用于少量项目,而collection-repeat非常适用于大量项目。它实际上是关于在设备中查看/渲染时的性能。为了更好地理解,你可以看到这个video,它真的帮助我理解了这两个项目。
lzfw57am5#
**在Simple Word中-**Ionic有一个collection-repeat指令,当您需要显示非常大的列表时,可以使用它来代替ng-repeat。
"如何运作?(深层)"该模块分为两个组件:$repeatFactory(定义了帮助器函数的服务)和collectRepeat(大多数逻辑所在的指令)。工厂最重要的一点是repeatManager方法,它是一个构造函数,在指令的link函数开始时被示例化,负责维护滚动视图的状态。在创建repeatManager的新示例时,还需要生成一个新的对象(或map),为所有已经被嵌入、渲染并且其作用域已经更新的项提供引用。还必须注册包含的父元素,以便我们以后可以将其高度更改为集合中所有项的高度。接下来,在集合上设置一个监视器,并将匿名函数设置为在集合发生变化时调用。这是大部分逻辑所在的地方。它分为三个步骤。
在下面的代码中有一些额外的花絮(也称为注解)。如果你在遵循上面的概要时遇到麻烦,它应该可以帮助你减轻一些困惑。这个模块也可以在github上找到。GitHub差异-工作示例Code Here
5条答案
按热度按时间1l5u6lss1#
collection-repeat
不是angularjs的一部分。据我所知,它来自Ionic Framework。因为documentation says是用来代替ng-repeat
的,因为它可能更好地处理大量的项目。collection-repeat
允许应用程序以比ng-repeat
更高的性能显示大量项目列表l3zydbqr2#
collection-repeat是Ionic为滚动大型列表提供的平滑解决方案。collection-repeat可用于大型列表项,在处理大型数据集时具有较高的性能。它只将当前可见的项目渲染到DOM中。这意味着在一个可以容纳8个项目的手机屏幕上,只会渲染与当前滚动位置匹配的8个项目。
ngRepeat是核心模块的一部分。ngRepeat指令为集合中的每个项目示例化一个模板。每个模板示例都有自己的作用域,其中给定的循环变量被设置为当前集合项目,$index被设置为项目索引或键。
根据使用案例,你可以使用任何选项。但是,如果你使用离子框架的移动的,那么我会建议去收集重复。
此外,如果您需要使用ng-repeat,建议在服务器端处理数据,并逐部分请求。这样您可以获得高性能,并减少客户端的处理。另一种选择是将大型数据集存储在客户端浏览器中,然后使用该数据集处理数据。
w41d8nur3#
如果有1000个
elements
,我强烈推荐collection-repeat
。它更灵活,它可以从collection
渲染尽可能多的items
,适合屏幕。其余的是动态加载的,你甚至可以使用200 k集合,它也会很平滑。ng-repeat
渲染collection
项目,直到它完成。因此性能会差得多。所以
collection-repeat
是我的朋友。祝您的发展顺利!
注意:
collection-repeat
不是角芯的一部分,请查看此处了解更多信息:http://ionicframework.com/docs/api/directive/collectionRepeat/m3eecexj4#
据我所知,ng-repeat适用于少量项目,而collection-repeat非常适用于大量项目。它实际上是关于在设备中查看/渲染时的性能。为了更好地理解,你可以看到这个video,它真的帮助我理解了这两个项目。
lzfw57am5#
**在Simple Word中-**Ionic有一个collection-repeat指令,当您需要显示非常大的列表时,可以使用它来代替ng-repeat。
"如何运作?(深层)"
该模块分为两个组件:$repeatFactory(定义了帮助器函数的服务)和collectRepeat(大多数逻辑所在的指令)。
工厂最重要的一点是repeatManager方法,它是一个构造函数,在指令的link函数开始时被示例化,负责维护滚动视图的状态。
在创建repeatManager的新示例时,还需要生成一个新的对象(或map),为所有已经被嵌入、渲染并且其作用域已经更新的项提供引用。还必须注册包含的父元素,以便我们以后可以将其高度更改为集合中所有项的高度。
接下来,在集合上设置一个监视器,并将匿名函数设置为在集合发生变化时调用。这是大部分逻辑所在的地方。它分为三个步骤。
在下面的代码中有一些额外的花絮(也称为注解)。如果你在遵循上面的概要时遇到麻烦,它应该可以帮助你减轻一些困惑。这个模块也可以在github上找到。
GitHub
差异-工作示例
Code Here