AngularJS Infinite滚动包含大量数据

Question

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

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

示例用例：页面加载，我看到前10结果（ 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/

Answer 6

从Angular Material中查看virtualRepeat

它实现了视口区域中可见行的动态重用，就像ui-scroll一样