我在表格行上使用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);
}
]
);
最佳答案
对于那些从Google找到此功能的人，下面的页面介绍了AngularJS 1.2中的一项功能，可帮助解决此问题:
http://www.bennadel.com/blog/2556-Using-Track-By-With-ngRepeat-In-AngularJS-1-2.htm
编辑添加:如果链接消失，链接文章中最重要的句子:
关于javascript - AngularJS:具有动态列表的ng-repeat，而无需重建整个DOM树？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17079541/