AngularJS无限滚动大量的数据
所以我正在尝试使用AngularJS创build一个无限的滚动表，类似于： 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中实现这个？ 我发誓我没有提供太多的代码，所以我不希望人们给出编码的答案，但至less有一些build议，在哪个方向去。
几件事情：
-
“无限滚动”到“1,000,000”行可能会有问题，无论框架如何，仅仅因为您创build了数以百万计的DOM节点（假设每个logging中有多个元素）
-
您正在使用
<li ng-repeat="item in items">{{item.foo}}</li>或者类似的东西来执行的实现将会很快出现问题，原因很大：{{item.foo}}}或者像这样的任何ngBind都会在该字段上设置一个$watch，这会在函数引用等forms中产生很多开销。因此，当“数组”中的10,000个小对象不会被那坏的…这10,000个项目中的每一个将有10,000-20,000个额外的函数参考。
在这种情况下，你想要做的是创build一个指令，处理添加和删除“太远”视图以及保持数据最新的DOM元素。 这应该可以缓解您可能遇到的大多数性能问题。
…好的无限滚动不是简单的，我很抱歉地说。
我遇到了这个nginfinitescroll的东西，它似乎正是你在找什么。 显示来自Reddit的实时数据的远程数据示例非常好。
我喜欢angular-ui实现ui-scroll …
https://github.com/angular-ui/ui-scroll
…通过ngInfiniteScroll。 与标准无限滚动的ui-scroll的主要区别在于，先前的元素在离开视口时被移除。
从他们的自述…
向用户呈现未定义长度的数据元素的列表的通常方式是以列表顶部的一小部分开始 – 仅足以填充页面上的空间。 当用户向下滚动列表时，附加的行被附加到列表的底部。
这种方法的问题在于即使列表顶部的行在滚动出视图时变得不可见，它们仍然是页面的一部分，仍然占用资源 。 随着用户向下滚动列表，Web应用程序变慢。
如果表示一行的html具有附加的事件处理程序和/或angular度观察者，这将成为一个真正的问题。 平均复杂度的Web应用程序可以轻松地引入20个观察者每行。 对于100行的列表，总共有2000个观察者和一个缓慢的应用程序。
此外，ui-scroll被主动维护。
看来， http : //kamilkp.github.io/angular-vs-repeat将是你在找什么。 这是一个虚拟的滚动指令。
原来，AngularJS的ng-grid模块几乎正是我所需要的。 如果您查看示例页面 ，则服务器端处理示例也是无限滚动列表，仅加载所需的数据。
感谢那些评论和回答的人。
最新的url： ng-grid
你可以尝试使用ng-infinite-scroll：
检查angular度材料的virtualRepeat
它实现了在视口区域中可见的行的dynamic重用，就像ui-scroll一样
