ng-repeat v / s md-virtual-repeat

时间:2016-02-22 15:35:43

标签: angularjs angularjs-ng-repeat angular-material

角度ng重复和角度材料md-virtual-repeat之间的区别?

我应该何时使用其中一种?

4 个答案:

答案 0 :(得分:5)

ng-repeat呈现列表中的所有元素,在大型列表中的性能较差。

md-virtual-repeat呈现视口中可见的列表,它不呈现列表的所有元素,当用户在大型列表的情况下滚动它然后似乎呈现其他元素时,这种方式是其性能,应当在使用大型列表。

答案 1 :(得分:4)

Angular文档非常清楚地说明了这一点:

  

虚拟重复是ng-repeat的有限替代品,它只渲染足够的dom节点来填充容器并在用户滚动时回收它们。迭代支持数组,但不支持对象。不支持跟踪,作为别名和(键,值)语法。

Source

答案 2 :(得分:2)

md-virtual-repeatng-repeat类似,但在您要加载大量数据时非常有用。

考虑您必须加载100,000条记录。在这种情况下,如果它是ng-repeat,那么它将最初加载所有数据。因此,用户在加载时可能会感到沮丧。如果用户只想要前50行数据,ng-repeat会强迫他等到所有100,000条记录加载!

为了避免这种情况,我们有md-virtual-repeat。它在需要时加载下一组数据(用户滚动以获取更多数据)

最终,如果您使用md-virtual-repeat,则优化加载时间。

答案 3 :(得分:0)

  

ngRepeat指令从集合中为每个项目实例化一次模板。每个模板实例都有自己的作用域,其中给定的循环变量设置为当前集合项,$ index设置为项索引或键。   Source

ng-repeat在渲染到UI之前加载整个数据集。处理较小的列表时非常有用。为确保最有效,建议在ng-repeat表达式中使用track by和or limit。使用md-data-table的一个很棒的ng-repeat示例是Daniel Nagy's table

有大量记录ng-repeat变得非常慢。如果速度很慢,建议用法是切换到md-virtual-repeat

  

md-virtual-repeat指定使用虚拟滚动重复的元素。   虚拟重复是ng-repeat的有限替代,它只渲染足够的DOM节点来填充容器并在用户滚动时回收它们。   Source

md-virtual-repeat仅按需加载数据 - 用户滚动。当结果集很大时,它可以更快地加载数据!将md-virtual-repeat插入表格时,ng-repeat会变得很麻烦。如果你google it使用表格会有很多错误。

最终md-virtual-repeat是最受支持的用法。我的个人目标是在拥有大型数据集时不使用const,而是尝试过滤掉不需要的行或使用分页。