Ng-重复显示一次绑定的不规则行为 [英] Ng-Repeat showing irregular behavior with one time binding

问题描述

我有一个ng-repeat指令，该指令正在对象的数组上运行.我正面临一种特定的情况，在这种情况下，当我将对象属性与一次绑定绑定时，当我清除并在运行ng-repeat的对象数组中添加数据时，它们就会刷新.

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.

代码

<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 ">&nbsp;</div>
            <div class="leftBottom">&nbsp;</div>
            <div class="rightTop">&nbsp;</div>
            <div class="rightBottom">&nbsp;</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>

这是相同的代码.

推荐答案

来自文档:

当重复的模板包含一次性绑定<时，请避免使用track by $index/a>.在这种情况下，nth DOM元素将始终与数组的nth项匹配，因此即使相应项发生更改，该元素上的绑定也不会被更新，从而导致视图脱离-与基础数据同步.

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参考

如果要使用具有唯一标识符属性的对象，则应按此标识符进行跟踪，而不是对象实例.如果以后再重新加载数据，即使集合中的JavaScript对象已替换为新对象，ngRepeat也不必为其已呈现的项目重建DOM元素.对于大型馆藏，这可以显着提高渲染性能.

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-重复显示一次绑定的不规则行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！