AngularJS：具有动态列表的ng-repeat，而无需重建整个DOM树？

一尘不染

AngularJS：具有动态列表的ng-repeat，而无需重建整个DOM树？

angularjs

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

到目前为止，每次从服务器收到一个新数组（当前每两秒钟轮询一次），整个ng-
repeat列表都会被删除并重新生成。这是有问题的，因为它会干扰文本选择，即使用户当前正在编辑输入字段，也会破坏输入字段，并且运行速度可能比必要的慢得多。

我已经编写了其他Web应用程序，这些应用程序使用jQuery和DOM操作实现了我想要的功能，但是代码最终变得非常繁琐，开发非常耗时。我希望使用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>

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

阅读 213

2020-07-04

共1个答案

一尘不染

对于那些从Google找到此功能的人，下面的页面介绍了AngularJS 1.2中的一项功能，可帮助解决此问题：

http://www.bennadel.com/blog/2556-Using-Track-By-With-ngRepeat-In-
AngularJS-1-2.htm

编辑添加： 如果链接消失，则链接文章中最重要的句子：

使用新的“ track
by”语法，我现在可以告诉AngularJS应该使用哪个对象属性（或属性路径）来将JavaScript对象与DOM节点相关联。这意味着只要“ track
by”关联仍然有效，我就可以换出JavaScript对象而不破坏DOM节点。

2020-07-04