2017-04-07 61 views
0

我有一個ng-repeat指令,運行在對象的數組上。我正面臨一個特定的場景,其中當我使用一次綁定綁定我的對象屬性時,當我清理並將數據添加到正在運行我的ng-repeat的我的Array對象中時,它們現在會刷新。吳重複顯示不規則的行爲與一次綁定

這裏需要強調的是,所有這些功能都是在先行工作的。

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> 

下面是相同的代碼。

+0

請張貼蹲式或小提琴 – Nishant123

回答

3

從文件:使用track by $index當重複模板包含one-time bindings

避免。在這種情況下,nthDOM元素將始終與數組中的nth項目匹配,因此即使相應項目發生更改,該元素上的綁定也不會更新,實質上會導致視圖與該元素不同步基礎數據。

— AngularJS ng-repeat API Reference

如果您正在使用有唯一標識符屬性對象時,你應該通過這個標識符,而不是對象實例跟蹤。如果稍後重新加載數據,ngRepeat將不必爲其已經呈現的項目重建DOM元素,即使集合中的JavaScript對象已被替換爲新元素。對於大型集合,這顯着提高了渲染性能。