24

angular ng-repeat ディレクティブに問題があります。現在、APIからアイテムのリストを取得するプロジェクトに取り組んでおり（1kアイテムになる場合もあります）、このリストは5秒ごとに更新する必要があります（関連プロジェクトを監視しています）。

リストの長さが少し大きくなると、DOM の再レンダリング中に Web サイトが「遅くなる」可能性があります。angularがDOM全体を再生成することがわかります（ただし、アイテムの95％は同じです！）

可能なアプローチの 1 つは、たとえば item.id に「追跡」式を設定することです。しかし、ここで別の問題が発生します。たとえば、説明が他のユーザーによって変更されたときにアイテムを再生成したいです。track by は item.id への式であるため、item.description の変更は DOM のアイテムを更新しませんでした。

複数のプロパティで追跡する方法はありますか? たぶん何かの機能？それとも「手」で比較しますか？

任意のアイデア、コード サンプルをいただければ幸いです :)

アップデート

トラックをitem.id angularに設定したときに発見したことは、アイテムのhtmlを再作成せず、既に作成された要素の値を更新するだけで、削除して作成するよりも「速い」ようです。以前は少し違いましたが。

修理

ng-repeat USE track by item.idで 1,000個を超えるアイテムのパフォーマンスを向上させたい場合は、パフォーマンスが向上します;)

4

3 に答える 3

39

複数のプロパティでトラックを処理する関数を作成する必要はありません。できるよ：

<div ng-repeat="item in lines track by item.id+item.description">
于 2016-03-11T12:31:28.090 に答える
26

コメントが示唆したように、次のようなことを試すことができます：

<select ng-model="item" ng-options="item.id as item.description for item in items track by itemTracker(item)">

コントローラーで:

$scope.itemTracker= function(item) {
  return item.id + '-' + item.description;
}

これは、リストが変更されたときに再レンダリングされる DOM 要素の数に役立つ場合があります。

于 2015-01-30T09:19:11.803 に答える