AngularJS无限滚动与大量数据 [英] AngularJS Infinite Scrolling with lots of data

问题描述

所以我想创建使用AngularJS的无限滚动表，与此类似： http://jsfiddle.net/vojtajina/ U7Bz9 /

So I'm trying to create an infinite scrolling table using AngularJS, similar to this: http://jsfiddle.net/vojtajina/U7Bz9/

我遇到的问题是，在的jsfiddle例如，如果我继续滚动，直到我有一万个结果，浏览器是要慢如蜗牛，是不是？因为现在是在$ scope.items 1,000,000 的结果。它会更好，如果我只曾在内部$ scope.items一时间，例如， 1000 的结果，我在查看结果碰巧内的那些 1000 。

The problem I'm having is that in the jsfiddle example, if I keep scrolling till I have a million results, the browser is going to slow to a crawl, wouldn't it? Because there would now be 1,000,000 results in $scope.items. It would be better if I only ever had, for example, 1000 results at a time inside $scope.items, and the results I was viewing happen to be within those 1000.

示例用例：页面加载和我看到的第一个 10 结果（满分 1,000,000 ）。虽然我只看到 10 ，第一个 1000 结果实际加载。然后，我滚动到列表的底部，看看在过去 10 项目。如果我回滚动再次顶端，我希望这顶 10 结果将不得不再次从服务器加载。

Example use case: page loads and I see the first 10 results (out of 1,000,000). Even though I only see 10, the first 1000 results are actually loaded. I then scroll to the very bottom of the list to see the last 10 items. If I scroll back up to the top again, I would expect that the top 10 results will have to be loaded again from the server.

我有一个项目，我用ExtJS的做到了类似的情况：有几千年的结果是一个无限滚动列表。 ExtJS的方式来处理，这是装载结果的当前页面，然后$ P $对 - 加载几个结果的额外的页为好。在任何时候，虽然，只有永远 10 本地存储的结果页面。

I have a project I did with ExtJS that a similar situation: an infinite scrolling list with several thousand results in it. The ExtJS way to handle this was to load the current page of results, then pre-load a couple of extra pages of results as well. At any one time though, there was only ever 10 pages of results stored locally.

所以我想我的问题是，我将如何去在AngularJS实施呢？我叩头我还没有提供了大量的code，所以我不希望人们只给了codeD的答案，但至少有一些建议在往哪个方向走。

So I guess my question is how would I go about implementing this in AngularJS? I kow I haven't provided much code, so I'm not expecting people to just give the coded answer, but at least some advice in which direction to go.

推荐答案

所以原来，的 NG-电网以AngularJS模块有pretty很多正是我需要的。如果你看一下例子页面，在服务器端处理实例是还有一个无限滚动列表只加载所需要的数据。

So turns out that the ng-grid module for AngularJS has pretty much exactly what I needed. If you look at the examples page, the Server-Side Processing Example is also an infinite scrolling list that only loads the data that is needed.

感谢那些谁评论，反正回答。

Thanks to those who commented and answered anyway.

最新网址： NG网

Latest URL : ng-grid

这篇关于AngularJS无限滚动与大量数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！