如何处理ng-repeat和大量项目?

时间:2013-09-19 08:23:14

标签: angularjs angularjs-ng-repeat

我有一个实时显示日志的Web应用程序。这意味着,日志仍在编写中,我想相应地更新UI。

目前,我通过使用数组并使用ng-repeat显示它来解决它。我不需要双向绑定,它只是显示一个简单的列表,但 - 正如所说 - 更新。更新并不总是发生在列表的开头或结尾,但也可能发生在两者之间(不要问为什么,这就是它的方式)。

基本上,我的方法很有效 - 但是一旦我们有几百条日志消息,应用程序开始变得非常非常慢。

我怎么能处理这个问题?

当然,我可以编写自己的指令,它只接受数组,连接并将其写入HTML,但这不会反映实时的变化,是吗?

1 个答案:

答案 0 :(得分:2)

我过去曾经处理过这两种方式。一个简单,一个很难。

简单方法:

编写一个过滤器并让你的ng-repeat从中获取条目。

<div data-ng-repeat="object in objects | myFilter:amount"></div>

在过滤器中,它根据金额发回最新信息(因此,如果您有1000,金额为50,则发回最新的50)。如果你需要整个东西连接一个按钮,将数量切换到一切(或零,或其他)。下行是你不会看到所有东西,当你需要时,你会看到负载。

艰难的道路:

你必须写一个指令来接收你的参赛作品。基于滚动位置和每个日志条目的高度(它们是否相同(更容易)?或动态(更难)),屏幕上显示的元素的子集由它们之前的填充偏移。这可能会变得非常棘手,非常快,但我已经实现并在平板电脑上运行了网格组件,其中包含> 100,000个条目。只有大约40个被缓冲,当你滚动顶部的那些被击倒并且新的进入。我把几个屏幕值得在那里作为备份以防它们滚动得太快。

我不能只是删除代码,因为它非常棘手,必须根据您的特定应用进行定制。