AngularJS：NG-重复使用动态列表，无需重建整个DOM树？ [英] AngularJS: ng-repeat with dynamic list, without rebuilding entire DOM tree?
问题描述
我使用的是与从服务器检索一个JSON阵列中的数据表行NG-重复。我的目标是让列表更新时自动项目被添加，删除或修改服务器上，而不会影响未修改的项目。在最后的实施，这些表行还将包含双向绑定＆LT;输入＆GT; 和＆LT;选择＆GT; 元素更新发送回服务器。一些在可用选项的＆LT;选择方式＆gt; 元素也将使用NG重复的指令从另一个列表中也可能产生变化。
到目前为止，每一个新的数组来自服务器时间（当前每两秒轮询），其全部纳克重复列表被删除和再生。这是有问题的，因为它与文本选择干扰，破坏的输入字段，即使他们当前正在由用户编辑，并且可能运行很多慢于必要的。
我写的其他Web应用程序，做我想做的使用jQuery和DOM操作什么，但code最终成为真正的多毛和开发非常耗时。我希望用AngularJS和数据绑定在code和时间的一小部分来实现这一点。
所以这里的问题：有可能更新支持数组这种方式，但只能修改对应于实际更改的项目/属性中的DOM元素
下面是模拟使用硬codeD阵列中的定时器（看到它定期轮询住在 HTTP最少测试用例：// jsfiddle.net/DWrmP/ ）。请注意，文本选择是由于每个元素清为500ms被删除并重新创建。
HTML
＆LT;机身NG-应用=对myApp＆GT;
＆LT;表NG-控制器=myController的＆GT;
＆LT; TR NG重复=项中的项目|排序依据：'身份证'＆GT;
＆所述; TD＆GT; {{item.id}}＆下; / TD＆GT;
＆所述; TD＆GT; {{item.data}}＆下; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; /身体GT;
的JavaScript
angular.module（'对myApp'，[]）。控制器（
myController的，[
'$范围，$超时'，
功能（$范围，$超时）{
$ scope.items = [
{ID：0，数据：'零'}
]; 功能使用setData（）{
$ scope.items = [
{ID：1，数据：一}，
{ID：2，数据：两课}，
{ID：5，数据：十二五}，
{ID：4，数据：'四'}，
{ID：3，数据：三化}
];
$超时（使用setData，500）;
}
$超时（使用setData，500）;
}
]
）;
对于那些从谷歌找到这个，下面的页面描述AngularJS 1.2功能，这个问题可以帮助：
<一个href=\"http://www.bennadel.com/blog/2556-Using-Track-By-With-ngRepeat-In-AngularJS-1-2.htm\">http://www.bennadel.com/blog/2556-Using-Track-By-With-ngRepeat-In-AngularJS-1-2.htm
的编辑补充：的从链接后最重要的句子，在情况下，链接不会消亡的：
随着新的轨道的语法，我现在可以告诉哪些对象属性（或属性路径）AngularJS应使用一个JavaScript对象与DOM节点相关联。这意味着我可以换出不破坏DOM节点，只要按部就班地进行，协会仍然有效的JavaScript对象。
I'm using ng-repeat on a table row with data from a JSON array retrieved from a server. My goal is to have the list update automatically whenever an item is added, removed, or modified on the server, without affecting the unmodified items. In the final implementation, these table rows will also contain bidirectionally bound
<input>and<select>elements to send updates back to the server. Some of the available options in the<select>elements will also be generated using ng-repeat directives from another list that may also change.So far, every time a new array comes from the server (currently polled every two seconds), the entire ng-repeat list is deleted and regenerated. This is problematic because it interferes with text selection, destroys input fields even if they are currently being edited by the user, and probably runs a lot more slowly than necessary.
I've written other web apps that do what I want using jQuery and DOM manipulation, but the code ends up being really hairy and development is time consuming. I'm hoping to use AngularJS and data binding to accomplish this in a fraction of the code and time.
So here's the question: is it possible to update the backing array this way, but only modify the DOM elements corresponding to the items/properties that actually changed?
Here's a minimal test case that simulates periodic polling using a hard-coded array in a timer (see it live at http://jsfiddle.net/DWrmP/). Notice that the text selection is cleared every 500ms due to the elements being deleted and recreated.
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); } ] );
解决方案For those finding this from google, the page below describes a feature in AngularJS 1.2 that helps with this problem:
http://www.bennadel.com/blog/2556-Using-Track-By-With-ngRepeat-In-AngularJS-1-2.htm
Edit to add: The most important sentences from the linked post, in case the link ever dies:
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.
这篇关于AngularJS：NG-重复使用动态列表，无需重建整个DOM树？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
