AngularJS:ng-repeat with dynamic list,而不重建整个DOM树？

Question

AngularJS:ng-repeat with dynamic list,而不重建整个DOM树？

nit*_*gen 33 javascript angularjs angularjs-ng-repeat

我在表行上使用ng-repeat,其中包含从服务器检索的JSON数组中的数据.我的目标是在服务器上添加,删除或修改项目时自动更新列表,而不会影响未修改的项目.在最终实现中,这些表行还将包含双向绑定<input>和<select>元素,以将更新发送回服务器.<select>元素中的一些可用选项也将使用来自另一个列表的ng-repeat指令生成,这些指令也可能会更改.

到目前为止,每当新阵列来自服务器(当前每两秒轮询一次)时,整个ng-repeat列表将被删除并重新生成.这是有问题的,因为它干扰文本选择,即使用户当前正在编辑它们也会破坏输入字段,并且可能比必要的运行速度慢很多.

我已经编写了其他使用jQuery和DOM操作执行我想要的Web应用程序,但代码最终变得非常毛茸茸并且开发非常耗时.我希望使用AngularJS和数据绑定来完成这个代码和时间的一小部分.

所以这里有一个问题:是否可以通过这种方式更新支持数组,但只修改与实际更改的项目/属性相对应的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>

Run Code Online (Sandbox Code Playgroud)

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);
        }
        ]
);

Run Code Online (Sandbox Code Playgroud)