angularjs – 更新数组时如何避免刷新ng-repeat DOM列表
|
我正在构建一个邮件系统的前端.它很好地分散在控制器和服务中.我正在使用$interval检查新邮件,这些邮件以
JSON格式收到,并添加到模型中.
所有内容都很好地呈现在屏幕上,复选框选择邮件删除和按钮等… 问题是,当一个人正在做出选择时 – $interval将检查新邮件,并用传入数据替换模型数组,重新创建DOM并重置所有选择,无论它是否包含新数据或相同数据.前端的整个想法是避免用户一直点击“更新”. 我认为angular.copy可以让我免于头痛,但是没有……我读到了关于在模型中包含日期以在传入和现有模型之间进行区分的所有奇怪的东西. 我只能为这个问题提出一个解决方案,那就是自己编写函数,将传入和现有数组与两个对象上的所有现有属性进行比较. FX. obj1.id == obj2.id然后检查属性,或添加对象(如果它不存在). 我在Knockout被宠坏了,因为它涉及这些事情. (当将相同的JSON数组发送到observable时,它将不会重新创建dom – 单独留下我的复选框/ dom更改). 有没有人有这个问题的良好解决方案或任何人都可以推荐某种黑客？我对一切都开放！我太绝望了.
我找到了解决方案！
在我的场景中探索并进一步检查“跟踪”之后,我可以看到它实际上做了更多的内容： 1)如果你有一个对象集合,每个对象具有：id,name,description,你可以使用’track by’选择它连接的属性,因此,在从webservice中检索新的对象集合时,它不会呈现属于该值的DOM对象. 2)最重要的是,我所追求的是：如果具有现有id的对象从服务器到达,并且fx具有更改的名称,它是否会在具有该ID的对象的数组集合中反映出来？是的,它会的！因此,“track by”实际上将检查传入对象的属性并替换旧对象并仍然保留id.这很激烈. 值得注意的是,“track by”也适用于除ng-repeat之外的其他指令,例如select. 我做了一个小小的演示,对于那些可能会对一切如何运作感到困惑的人……但它看起来很酷！ <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>
http://jsfiddle.net/KUf8C/ （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |