通过多个属性对轨道进行ng-repeat

Question

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

当列表长度稍微大一点时,网站重新渲染DOM可能会"慢".结果是角度再生整个DOM(但95%的项目是相同的!)

其中一种可能的方法是将"track by"表达式设置为item.id. 但是这里出现了另一个问题,我还想要重新生成项目,例如其他用户更改了描述.由于track by表达于item.id,因此item.description中的更改未更新DOM中的项目.

有办法跟踪多个属性？也许有些功能？或者也许用"手"做比较？

任何想法,代码样本我会很感激:)

UPDATE

我发现当我设置跟踪到item.id angular时没有为项目重新创建html,只更新已经创建的元素中的值,它似乎"更快"然后删除和创建.以前我虽然有点不同.

固定

对于那些希望通过item.id在ng-repeat USE 轨道上超过> 1k项目获得更好性能的人来说,它将提升你的表现;)

Answer 1

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

<div ng-repeat="item in lines track by item.id+item.description">

Answer 2

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

<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元素的数量.

Answer 3

据我所知，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()

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