更新数组时如何避免刷新 ng-repeat DOM 列表 [英] How to avoid refreshing ng-repeat DOM list when array is updated
问题描述
我正在构建一个邮件系统的前端.它很好地分为控制器和服务.我正在使用 $interval 检查以 JSON 格式接收并添加到模型中的新邮件.
所有内容都可以很好地呈现在屏幕上，并带有复选框以选择要删除的邮件和按钮等...
问题是，当一个人在做选择时 - $interval 将检查新邮件，并用传入的数据替换模型数组，重新创建 DOM 并重置所有选择，无论它包含新的还是相同的数据.前端的整个想法是避免用户一直点击更新".
我认为 angular.copy 可以让我免于头疼，但不...我阅读了各种关于在模型中包含日期以区分传入模型和现有模型的奇怪内容.
对于这个问题，我只能想出一个解决方案，那就是自己编写函数，将传入和现有数组与两个对象上的所有现有属性进行比较.外汇.obj1.id == obj2.id 然后检查属性，如果不存在则添加对象.
我在 Knockout 中被宠坏了，因为它处理这类事情.(当将相同的 JSON 数组发送到 observable 时，它不会重新创建 dom - 单独保留我的复选框/dom 更改).
有没有人对这个问题有很好的解决方案，或者有人可以推荐某种黑客吗?我对一切都持开放态度！我已经绝望了.
我找到了解决方案！
在我的场景中仔细查看并进一步检查track by"之后，我可以看到它实际上做了更多它所说的:
1) 如果你有一个对象集合，每个对象都有:id、name、description，你可以使用track by"选择一个它连接的属性，因此，在从中检索一个新的对象集合时一个网络服务，它不会呈现属于该值的 DOM 对象.
2) 最重要的是，我追求的是:如果一个具有现有 id 的对象从服务器到达并更改了名称，它会反映在具有该 id 的对象的数组集合中吗?是的，它会！因此，track by"实际上会检查传入对象的属性并替换旧对象，但仍不理会id.太激烈了.
还值得注意的是，track by"也适用于除 ng-repeat 之外的其他指令，例如 select.
我做了一个小演示，供其他可能对一切工作原理感到困惑的人......但它似乎很酷！
{{country.id}}{{国家的名字}}<input type="checkbox"></input><div><选择 ng-model='nonExisting'ng-options='country.name 在 countryArray 中的国家track by country.id'></select>
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...
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.
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.
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.
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.
I found a solution!
After poking around and further checking the "track by" with my scenarios, I can see that it actually does more what it says:
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) 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.
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>
这篇关于更新数组时如何避免刷新 ng-repeat DOM 列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
