Ng-Repeatは1回のバインディングで不規則な動作を示します。

Question

オブジェクト上の配列で実行されているng-repeat命令があります。私は特定のシナリオに直面しています。オブジェクトプロパティを1回バインドするときに、それらをパージして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> 

は同一のコードです。ドキュメントから

Answer 1

：繰り返しテンプレートはone-time bindingsが含まれている場合track by $indexを使用して

は避けてください。そのような場合、nthのDOM要素は常に配列のnthアイテムと一致するため、対応するアイテムが変更されてもその要素のバインディングは更新されず、基本的にビューが非同期になる基礎となるデータ。

— AngularJS ng-repeat API Reference

あなたはユニークな識別子プロパティを持つオブジェクトを使用している場合、あなたはこの識別子の代わりに、オブジェクトのインスタンスによって追跡する必要があります。あとでデータをリロードすると、コレクション内のJavaScriptオブジェクトが新しいものに置き換えられたとしても、既にレンダリングされたアイテムのDOM要素を再構築する必要はありません。大規模なコレクションの場合、レンダリングのパフォーマンスが大幅に向上します。