24

我有角度 ng-repeat 指令的问题。目前我在一些项目上工作，从 API 我得到一个项目列表（有时可能是 1k 个项目），这个列表应该每 5 秒刷新一次（它正在监视相关项目）。

当列表长度稍大时，网站在重新渲染 DOM 时可能会“变慢”。结果表明，角度重新生成了整个 DOM（但 95% 的项目是相同的！）

一种可能的方法是将“track by”表达式设置为例如 item.id。但是这里出现了另一个问题，例如，当其他用户更改描述时，我还希望重新生成项目。由于 track by is expression to item.id 更改 item.description 并没有更新 DOM 中的项目。

有办法通过多个属性进行跟踪吗？也许一些功能？或者也许可以通过“手”进行比较？

任何想法，代码示例我将不胜感激:)

更新

当我将 track by 设置为 item.id 时，我发现 angular 并没有为项目重新创建 html，只是更新已创建元素中的值，它似乎“更快”，然后删除和创建。以前我虽然有点不同。

使固定

对于那些在ng-repeat USE track by item.id中寻找超过 1k 个项目的更好性能的人，它将提高您的性能；）

4

3 回答 3

39

您不需要创建一个函数来处理多属性的跟踪。你可以做：

<div ng-repeat="item in lines track by item.id+item.description">
于 2016-03-11T12:31:28.090 回答
26

正如评论所建议的，你可以尝试这样的事情：

<select ng-model="item" ng-options="item.id as item.description for item in items track by itemTracker(item)">

在您的控制器中：

$scope.itemTracker= function(item) {
  return item.id + '-' + item.description;
}

这可能有助于在列表更改时重新渲染 DOM 元素的数量。

于 2015-01-30T09:19:11.803 回答
0

据我所知，angularjs 模型绑定到 ui 视图，因此一旦值更改，模型将通过 $apply 或 $digest 重新呈现。因此，在您的情况下，您希望将模型值绑定到 ui 视图，但如果值没有更改，也不想重新渲染视图，这是不可能的。这就是我所知道的。

但是，您可以只操作 dom 元素。例如将数据存储到变量中

var x = [{id:"id1",value:"v1"},{id:"id2",value:"v2"}]

在 html 中，手动追加或使用指令追加，然后将 id 分配给元素，

<div id="id1">v1</div>

根据您的需要检查并比较该值。一旦找到，然后 angular.element("#yourid").text()

这将解决您的浏览器资源消耗问题。

于 2015-01-30T09:04:59.987 回答