Ng-Repeat 显示一次绑定的不规则行为
[英] Ng-Repeat showing irregular behavior with one time binding
本文介绍了Ng-Repeat 显示一次绑定的不规则行为的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个在对象数组上运行的 ng-repeat 指令.我面临一个特定的场景，当我使用一次绑定绑定我的对象属性时，当我清除并在我运行 ng-repeat 的对象数组中添加数据时，它们现在正在刷新.
这里的重点是，所有这些功能以前都可以使用.
代码
<div class="media search-result-container"><div class="media-left"><div class="left"> </div><div class="leftBottom"> </div><div class="rightTop"> </div><div class="rightBottom"> </div><div class="searchimg_container" ng-click="redirectionToPage(prod.url)"><!--<img src="{{prod.tkh_imageurl}}" alt="不可用" class="lazyload"/>--><图片><source data-srcset="{{prod.desktopImage}}" media="(min-width: 768px)"><source data-srcset="{{prod.mobileImage}}" media="(min-width: 320px)"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="${properties.placeholderimage}" alt="不可用" class="lazyload"><!--${properties.placeholderimage}--></图片>
<div class="media-body search-desc"><p ng-if="isPDF" class="subheading" ng-click="redirectionToPage(prod.url)">{{::prod.title}}</p><p ng-if="!isPDF" class="subheading" ng-click="redirectionToPage(prod.url)">{{::prod.tkh_title}}</p><p ng-if="!isPDF" class="resultdesc">{{::prod.tkh_description}}</p>
这是相同的代码.
解决方案
来自文档:
<块引用>
避免使用 track by $index 当重复的模板包含 一次性绑定.在这种情况下，nth DOM 元素将始终与数组的nth 项匹配，因此即使相应项发生更改，该元素上的绑定也不会更新，本质上会导致视图与底层数据不同步.
—AngularJS ng-repeat API 参考
如果您正在使用具有唯一标识符属性的对象，您应该通过此标识符而不是对象实例进行跟踪.如果您稍后重新加载数据，ngRepeat 将不必为它已经呈现的项目重建 DOM 元素，即使集合中的 JavaScript 对象已被新对象替换.对于大型集合，这会显着提高渲染性能.
I am having a ng-repeat directive that is running on the array on object. I am facing a specific scenario in which, When I Bind my object properties with one time binding they are now getting refreshed when I Purge and add the data in my Array Of Object on which I am running my ng-repeat.
The point to focus here is, All these functionalities were working previosuly.
CODE
<div class="search_result" data-ng-repeat="prod in searchResult track by $index" ng-show="ShowWhenResultPositive">
<div class="media search-result-container">
<div class="media-left">
<div class="left "> </div>
<div class="leftBottom"> </div>
<div class="rightTop"> </div>
<div class="rightBottom"> </div>
<div class="searchimg_container" ng-click="redirectionToPage(prod.url)">
<!--<img src="{{prod.tkh_imageurl}}" alt="Not Available" class="lazyload"/>-->
<picture>
<source data-srcset="{{prod.desktopImage}}" media="(min-width: 768px)">
<source data-srcset="{{prod.mobileImage}}" media="(min-width: 320px)">
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="${properties.placeholderimage}" alt="Not Available" class="lazyload"><!--${properties.placeholderimage}-->
</picture>
</div>
</div>
<div class="media-body search-desc">
<p ng-if="isPDF" class="subheading" ng-click="redirectionToPage(prod.url)">{{::prod.title}}</p>
<p ng-if="!isPDF" class="subheading" ng-click="redirectionToPage(prod.url)">{{::prod.tkh_title}}</p>
<p ng-if="!isPDF" class="resultdesc">{{::prod.tkh_description}}</p>
</div>
</div>
</div>
Here is the code for the same.
解决方案
From the Docs:
Avoid using track by $index when the repeated template contains one-time bindings. In such cases, the nth DOM element will always be matched with the nth item of the array, so the bindings on that element will not be updated even when the corresponding item changes, essentially causing the view to get out-of-sync with the underlying data.
— AngularJS ng-repeat API Reference
If you are working with objects that have a unique identifier property, you should track by this identifier instead of the object instance. Should you reload your data later, ngRepeat will not have to rebuild the DOM elements for items it has already rendered, even if the JavaScript objects in the collection have been substituted for new ones. For large collections, this significantly improves rendering performance.
这篇关于Ng-Repeat 显示一次绑定的不规则行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
