如何避免令人耳目一新纳克重复DOM列表数组时更新 [英] How to avoid refreshing ng-repeat DOM list when array is updated
问题描述
我建立一个前端到邮件系统。它很好地分割在控制器和服务。我使用$间隔以检查新邮件，这将会在JSON接受，并添加到模型。
I'm building a front-end to a mail-system. It's nicely split up in controllers and services. I'm using $interval to check for new mails, which gets received in JSON, and added to a model.
一切都被很好地呈现在屏幕复选框以选择删除和按钮等邮件...
Everything gets rendered nicely to the screen with checkboxes to choose mails for deletions and buttons etc...
的问题是，虽然一个人作出选择 - $间隔将检查是否有新邮件，并更换模型阵列与进入的数据，重新创建DOM和复位所有的选择，无论它是否包含新的或相同的数据。前端的整体思路是避免用户点击更新的所有时间。
The problem is, that while a person is making choices - $interval will check for new mails, and replace the model-array with the incoming data, recreating the DOM and resetting all choices no matter if it contains new or the same data. The whole idea of the front-end is to avoid a user clicking "update" all the time.
我想angular.copy能救我头痛，但没有...我所有的那种怪异的东西有关，包括日期模型中的传入和现有的模型之间的差异比较来读了。
I thought angular.copy could save me from headaches, but no... I read up on all kind of weird stuff about including dates in your model to diff between the incoming and existing model.
我只能想出这个问题一个解决方案，那就是传入和现有数组与两个对象的所有现有属性比较写函数自己。 FX。 obj1.id == obj2.id然后检查属性，或者添加对象，如果它不存在。
I can only come up with one solution for this problem, and that is to write functions myself that compare the incoming and existing array with all existing properties on both object. Fx. obj1.id == obj2.id then check properties, or add object if it doesn't exist.
我已经被宠坏的烂淘汰赛，因为它与这几样东西的交易。 （发送相同的JSON阵列可观察到的时候，它不会重新创建DOM - 离开我的复选框/ DOM的变化，单纯）。
I have been spoiled rotten in Knockout, because it deals with these kind of things. (when sending the same JSON array to an observable it will not recreate the dom - leaving my checkboxes/dom changes, alone).
有没有人有这个问题很好的解决方案或任何人可以推荐某种形式的黑客攻击？我接受一切！我超越绝望。
Does anyone have a good solution for this problem or can anyone recommend a hack of some kind? I'm open to everything! I'm beyond desperate.
推荐答案
我找到了解决方法！
四处活动，并进一步的曲目我的场景检查后，我可以看到，它实际上更多的是什么它说：
After poking around and further checking the "track by" with my scenarios, I can see that it actually does more what it says:
1）如果你有对象的集合，具有每个对象：ID，名称，描述，您可以使用轨道由选择，它连接到一个属性，因此，从检索对象的一个新的集合Web服务，它不会使属于价值DOM对象。
1) If you have a collection of objects, with each object having: id, name, description, you can, using 'track by' choose a property that it connects to, so, on retrieving a new collection of objects from a webservice, it will not render the DOM object belonging to the value.
2）最重要的，我是什么后：如果与现有ID的对象从服务器到达与FX更改的名字，将它与该ID的对象的数组集合中反映出来？是的，它会！所以，按部就班地进行，将实际检查传入对象的属性，并更换旧的对象，独自还剩下的ID。这是激烈的。
2) Most importantly, and what I was after: If an object with an existing id arrives from the server with fx a changed name, will it be reflected in the array collection on the object with that id? Yes, it will! So, "track by" will actually check the properties of the incoming object and replace the old object and still leave the id alone. That's intense.
另外值得一提的是，轨道的作品也与其他的指令不是 NG-重复，如选择
It's also worth noting that "track by" works also with other directives than ng-repeat, such as select.
我做了一个小的演示，对于其他人谁可能会感到困惑如何一切正常......但它似乎是酷！
I made a small demo, for other people who might be confused about how everything works... but it seems to be cool!
<div ng-repeat='country in countryArray track by country.id'>
{{country.id}}
{{country.name}}
<input type="checkbox"></input>
</div>
<div>
<select ng-model='nonExisting'
ng-options='country.name for country in countryArray
track by country.id'></select>
</div>
</div>
这篇关于如何避免令人耳目一新纳克重复DOM列表数组时更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
