web-dev-qa-db-ja.com

ng-repeat with track by複数のプロパティ

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

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

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

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

任意のアイデア、私が感謝するコードサンプル:)

[〜＃〜] update [〜＃〜]

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

[〜＃〜] fix [〜＃〜]

ng-repeat USE track by item.idで> 1kアイテム以上のより良いパフォーマンスを探している人のために、あなたのパフォーマンスを向上させます;）

angularjsangularjs-ng-repeatangularjs-track-by
18
qwetty

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

<div ng-repeat="item in lines track by item.id+item.description">
34
Pedro Justo

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

<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要素の数に役立つ場合があります。

22
Wawy

私の知識に基づいて、angularjsモデルはuiビューにバインドされるため、値が変更されるとモデルは$ applyまたは$ digestを介して再レンダリングされます。あなたの場合、u wanはモデル値をuiビューにバインドしますが、値が変更されていない場合、つまり不可能な場合はビューを再レンダリングしません。これは私が知っていることです。

ただし、uはdom要素を操作するだけです。たとえば、データを変数に保存する

var x = [{id:"id1",value:"v1"},{id:"id2",value:"v2"}]

htmlでは、手動で追加するか、ディレクティブを使用して追加し、要素にidを割り当てます。

<div id="id1">v1</div>

あなたのニーズに基づいて、値を確認して比較します。見つかったら、angular.element（ "＃yourid"）。text（）

これにより、ブラウザのリソース消費の問題が解決されます。

0
Stupidfrog