問題タブ [angularjs-track-by]

私は ng-repeat + Filter + Pagination(ui-bootstrap) で作業しています

1- ng-repeat + フィルターは正常に動作しています:

2- ng-repeat + filter + pagination も正常に機能しています:

3-問題は、ng-repeat + Filter + Pagination + track by $index を組み合わせたときです

各ページで 0 から 4 までのインデックス値の再起動を取得します

ここに私のテーブルのスクリーンショットがあります

「$indexで追跡」の正しい順序についてのアイデア！どこに置けばいいですか？

ここに私のjsonオブジェクト：

私は次のように選択します：

オプションが選択されると、前の選択を繰り返す別の選択が必要になりngModelます。次は次のようになります。

$scope.dashboard.type.name = 'qwe'オプションを手動で選択すると正常に動作しますが、それらがスクリプトのdashboard.type（例：）の値である場合、オブジェクト全体を保存track byするのではなく、オプションを選択してに保存するために使用します。使用した値を保存するだけですオプションdashboard.typeで。track by

dashboard.type の値:

1. オプションを手動で選択すると： {"name":"qwe","field":["a","b","c","d","f"],"id":3}
2. トラックバイ使用時： {"name":"qwe"}

注:は使用できませんtrack by item。オブジェクトのプロパティである必要がありますitem。またはのいずれnameかidです。

ここにplnkrがあります。

編集 ：

多くの人が指摘したように、オブジェクトをtodosリストの値に初期化できないことを明確にしたいと思います。これは、dashboard.type.name値が毎回todos異なり、リストが数十から数百のオブジェクトに変化するためです。todosここで、リストのチェックを繰り返しtodos[index].name==someName、関連するオブジェクトを割り当てる必要があります。私は積極的にこのソリューションを回避しようとしています (より良い方法が必要なので)。

注：ng-change実際のオブジェクトを使用して割り当てよ うとしましdashboard.type.nameたが、オプションが手動で選択された場合にのみ機能し、すでに正常に機能しているようです。使用時にオブジェクトを割り当てませんtrack by。

重要: $scope.dashboard.type.name = 'qwe'は単なる例です。の値は$scope.dashboard.type.name、ページが読み込まれるたびに変わる可能性があります。

PS: また、これについては以前に言及しておくべきでした。申し訳ありません。

どのように機能し、何をするのかよくわかりませんtrack by。
私の主な目標は、それを使用してng-repeat精度を高めることです。

html:

コントローラ：

ng-inittr が初期化されたときに関数が初めて呼び出されました。変更ボタンをクリックすると、行コレクションが変更され、ng-init再度呼び出されることはありません。$index ng-init両方の時間を呼び出してトラックを削除した場合。track by を使用する$indexと、一度だけ呼び出されました。なぜそうなのですか？これについてのアイデア。

ngFor で trackBy を有効にし、それが呼び出されて機能していることを確認しましたが、ブラウザーで DOM が再レンダリングされ、行がちらつくことにまだ気付きます。ここで何が起きてるの？Angular1 では、ブラウザー/Chrome デバッガーで、item.id によるトラックを使用しているときに DOM が更新/置換されず、ちらつきが発生しないことを確認できます。私のコードに何らかのエラーがありますか、それとも実際に何か良いことをしていることに気付いていないフードの下で何かが起こりますか?

編集 私はこれを引き起こしている私のAPIサービスで観測可能であるようにエラーを追跡しましたが、それでも理由はわかりません.

解決

新しいデータをリロードするたびに新しいものに置き換えるのではなく、同じ観察可能な this.items を使用することで解決しました。

だから私はこのコードを表示しています:

これは、「現在アクティブな」追加要素を対象としています。しかし、これを使用するたびに、同じ属性を持つ他の追加要素も変更されますが、それらの各要素には一意のキーが割り当てられています。

次に、このデータ セットを新しいキーでプッシュします。

たとえば、2 つの「テーブル」キーがあると、次のようになります。

画像配列を繰り返し、さらに読み込みボタンを ajax 要求に使用して、その配列に応答画像をプッシュするコードを作成しました。しかし、新しい応答が来るたびに、イメージ全体が再シャッフルされます。

そして私のコントローラーコードでは：

サーバーが3つの画像を送信するたびに。以前は、私が追加したこのSOアンサーからtrack by $index使用しませんでしたが、運がありませんでした。track by $index

angular は配列全体を再レンダリングしていると思います。もしそうなら、どうすればこの再レンダリングを止めることができますか?