Question

我有一个在对象上的数组上运行的ng-repeat指令。我面临一个特定的场景，当我用一次绑定绑定我的对象属性时，它们现在在我清除并在我正在运行我的ng-repeat的Array Of Object中添加数据时刷新。

这里要关注的重点是，所有这些功能都是有效的。

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 ">&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>

这是相同的代码。

Answer 1

来自文档：

当重复的模板包含one-time bindings时，请避免使用track by $index。在这种情况下，nth DOM元素将始终与数组的nth项匹配，因此即使相应的项更改，也不会更新该元素上的绑定，从而导致视图与基础数据失去同步。

— AngularJS ng-repeat API Reference

如果您正在处理具有唯一标识符属性的对象，则应使用此标识符而不是对象实例进行跟踪。如果您稍后重新加载数据，ngRepeat将不必为已呈现的项重建DOM元素，即使集合中的JavaScript对象已替换为新对象。对于大型集合，这可以显着提高渲染性能。

Ng-Repeat通过一次时间绑定显示不规则行为

1 个答案: