ng-repeatトラックのバインディング動作

Question

コードに表示されているビューの$ scopeに大きなネストされたオブジェクトを1つバインドすると仮定します。ここで、 "e"オブジェクトの値が更新されます。これは、すべてのバインディングをチェックし、DOMを更新する原因となります。代わりに、各ng-repeatディレクティブで "track by"を使用した場合、 "e"オブジェクトのバインディングだけが反応し、 "e"オブジェクトのdomが更新されることを意味しますか？

<div ng-repeat="a in b"> 
    <div ng-repeat="c in a"> 
     <div ng-repeat="d in c"> 
      <div ng-repeat="e in d"> 
        {{e.value}}<br> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

バインディングはどんなチェックしていない、とだけ異なる場合ダイジェスト・サイクルごとに、更新されます。 DOM要素を再構築する場合、Angularは一意の識別子を使用して、ng-repeatの各アイテムに既に一致するDOM要素があるかどうか、または新しい要素をレンダリングする必要があるかどうかを判断します。

デフォルトでは、Angularは各オブジェクトの$id（または$$hashKey）を使用して、これらの一意の識別子を作成し、管理します。

track byがAngularに、フードの下で管理するのではなく、あなたの選択した一意の識別子を使用するように指示する方法として追加されました。

これは、データを更新して$idまたは$$hashKeyを削除または変更し、データがまったく変更されなかった場合でも各DOM要素の不要な再構築をトリガーする場合に便利です。

は、この例を考えてみましょう：あなたはどのfetch()方法を持っている、あなたのデータを更新するサービスDataServiceを使用

<li ng-repeat="item in data">{{item.value}}</li>

：

• あなたは、データレコードを表示するngRepeatを持っていますSQLデータベースからデータを取り出し、レコードを返します。あなたの$scope内のデータを更新

• は、そのサービスを呼び出し、再割り当ての結果に自分のデータ変数が含まれます。

  $scope.data = DataService.fetch();

つまり、一つだけのアイテムが異なっていた場合でも、 $idまたは$$hashKeyのプロパティはすべて消えていますが、Angularではすべての項目が新しいものとみなします。すべてのDOM要素をゼロから再構築します。

ただし、データはSQLデータベースのものなので、一意の識別子（主キー）、つまりidの列が既にあります。あなたがあることをごngRepeatを変更することができます：あなたがデータを再割り当てするたびに失われ、代わりに$$hashKeyを探しての、

今

<li ng-repeat="item in data track by item.id">{{item.value}}</li> 

、角度は、あなたが（item.id）にそれを告げたプロパティを使用します。そのプロパティーはが変数を再割り当てしても保持されるため、Angularは新しいitemのDOMエレメントのみを再ビルドするので、リストは再び最適化されます。