AngularJS Infinite滚动包含大量数据

Question

所以我试图使用AngularJS创建一个无限滚动表,类似于:http://jsfiddle.net/vojtajina/U7Bz9/

我遇到的问题是,在jsfiddle示例中,如果我继续滚动直到我有一百万个结果,浏览器会慢慢爬行,不是吗？因为1,000,000$ scope.items 现在会有结果.如果我1000在$ scope.items中只有一次得到结果会更好,而我正在查看的结果恰好在那些内部1000.

示例用例:页面加载,我看到第一个10结果(out of 1,000,000).即使我只看到10,第一个1000结果实际上已加载.然后我滚动到列表的最底部以查看最后的10项目.如果我再次向上滚动到顶部,我希望10必须从服务器再次加载顶部结果.

我有一个与ExtJS做过的项目类似的情况:一个包含数千个结果的无限滚动列表.处理此问题的ExtJS方法是加载当前结果页面,然后预加载几个额外的结果页面.但在任何时候,只有10本地存储的结果页面.

所以我想我的问题是如何在AngularJS中实现它？我知道我没有提供太多的代码,所以我不希望人们只是给出编码的答案,但至少有一些建议指向哪个方向.

Answer 1

有几件事:

1. "无限滚动"到"1,000,000"行可能会出现问题,无论框架如何,只是因为您创建了数百万个DOM节点(假设每个记录中有多个元素)

2. 你看有这样的实现<li ng-repeat="item in items">{{item.foo}}</li>之类的东西都会有问题,非常快速的一个大原因:{{item.foo}}}或任何ngBind类似,将成立一个$watch在该领域,这在函数引用等形式创造大量的开销因此,虽然"数组"中的10,000个小对象不会那么糟糕......但是这些10,000个项目中的每一个都会有10,000到20,000个额外的函数引用.

在这种情况下你想要做的是创建一个指令来处理添加和删除"太远"的DOM元素,以及保持数据是最新的.这应该可以缓解您可能遇到的大多数性能问题.

...好的无限滚动并不简单,我很遗憾地说.

Answer 2

我喜欢angular-ui实现ui-scroll ...

https://github.com/angular-ui/ui-scroll

...超过ngInfiniteScroll.与标准无限滚动的ui-scroll的主要区别在于,在离开视口时会删除先前的元素.

从他们的自述...

向用户呈现未定义长度的数据元素列表的常用方法是从列表顶部的一小部分开始 - 刚好足以填充页面上的空间.当用户向下滚动列表时,附加行将附加到列表的底部.

这种方法的问题在于,即使列表顶部的行在滚出视图时变得不可见,它们仍然是页面的一部分并仍然消耗资源.随着用户向下滚动,列表增长并且Web应用程序变慢.

如果表示行的html附加了事件处理程序和/或角度观察器,则这成为一个真正的问题.平均复杂度的Web应用程序可以轻松地每行引入20个观察者.对于100行的列表,总共有2000个观察者和一个缓慢的应用程序.

此外,ui-scroll得到积极维护.

Answer 3

似乎http://kamilkp.github.io/angular-vs-repeat将是您正在寻找的.它是一个虚拟滚动指令.

Answer 4

事实证明,AngularJS 的ng-grid模块几乎完全符合我的需要.如果查看示例页面,服务器端处理示例也是一个无限滚动列表,仅列出所需的数据.

感谢那些评论和回答的人.

最新网址:ng-grid

Answer 5

您可以尝试使用ng-infinite-scroll:

http://binarymuse.github.io/ngInfiniteScroll/