防止ng重复重绘整行

时间:2013-11-07 13:44:54

标签: angularjs

如果您检查以下jsfiddle,您将看到我遇到的问题示例。

http://jsfiddle.net/Yram7/1/

我的问题是,当ng-repeat有一个非常简单的数据类型驱动它,例如数组数组,例如[1..10]当数组更新时,angularjs知道数据valuse没有改变,并且因此不会重绘行DOM。这意味着诸如下拉框之类的UI可以与setInterval结合使用,从而导致数据刷新。

一切都很好。

但是,如果我更改ng-repeat后面的数据结构以包含复杂对象,例如[{"i" : 1}..{"i" : 10}] angularjs完全重绘该行(即使值当前没有改变,尽管对象引用当然有),因此如果选择了下拉列表,则通过重新绘制行来破坏html,因此不会保留用户选择的不良UI体验。

尝试摆弄选择选项,然后点击下拉箭头查看我的意思。

是否有可能以某种方式阻止此行为,以便DOM只有在行数据值中发现某种变化时才会重绘?

1 个答案:

答案 0 :(得分:4)

在你的小提琴中,你使用的是Ant古董版的Angular。更新的版本在track bydocs)中包含ng-repeat子句。

这是你的小提琴分叉,用track by实现它并且它有效:http://jsfiddle.net/BFFJn/

track by子句将迭代对象的标识与DOM相关联,这样当找到具有相同id的(可能是不同的)对象时,DOM将被更新,而不是被替换。如果没有给出track by,则使用对象相等。