我在表行上使用 ng-repeat，数据来自从服务器检索的 JSON 数组。我的目标是在服务器上添加、删除或修改项目时自动更新列表，而不影响未修改的项目。在最终实现中，这些表行还将包含双向绑定(bind) <input>和 <select>元素将更新发送回服务器。 <select> 中的一些可用选项元素也将使用来自另一个列表的 ng-repeat 指令生成，该列表也可能会发生变化。
到目前为止，每次从服务器传来一个新的数组(目前每两秒轮询一次)，整个 ng-repeat 列表都会被删除并重新生成。这是有问题的，因为它会干扰文本选择，即使用户当前正在编辑输入字段也会破坏输入字段，并且运行速度可能比必要的慢得多。
我已经编写了其他 Web 应用程序来使用 jQuery 和 DOM 操作来执行我想要的操作，但代码最终变得非常多毛并且开发非常耗时。我希望使用 AngularJS 和数据绑定(bind)在一小部分代码和时间内完成此任务。
那么问题来了:是否可以通过这种方式更新支持数组，但只修改与实际更改的项目/属性对应的 DOM 元素？
这是一个最小的测试用例，它使用计时器中的硬编码数组模拟定期轮询(在 http://jsfiddle.net/DWrmP/ 上实时查看)。请注意，由于元素被删除和重新创建，文本选择每 500 毫秒被清除一次。
HTML
<body ng-app="myApp">
<table ng-controller="MyController">
<tr ng-repeat="item in items | orderBy:'id'">
<td>{{item.id}}</td>
<td>{{item.data}}</td>
</tr>
</table>
</body>
JavaScript
angular.module('myApp', []).controller(
'MyController', [
'$scope', '$timeout',
function($scope, $timeout) {
$scope.items = [
{ id: 0, data: 'Zero' }
];
function setData() {
$scope.items = [
{ id: 1, data: 'One' },
{ id: 2, data: 'Two' },
{ id: 5, data: 'Five' },
{ id: 4, data: 'Four' },
{ id: 3, data: 'Three' }
];
$timeout(setData, 500);
}
$timeout(setData, 500);
}
]
);
最佳答案
对于那些从谷歌上找到这个的人，下面的页面描述了 AngularJS 1.2 中的一个功能，可以帮助解决这个问题:
http://www.bennadel.com/blog/2556-Using-Track-By-With-ngRepeat-In-AngularJS-1-2.htm
编辑以添加:链接帖子中最重要的句子，以防链接失效:
With the new "track by" syntax, I can now tell AngularJS which object property (or property path) should be used to associate a JavaScript object with a DOM node. This means that I can swap out JavaScript objects without destroying DOM nodes so long as the "track by" association still works.
关于javascript - AngularJS:ng-repeat 动态列表，无需重建整个 DOM 树？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17079541/