Pertanyaan AngularJS: ng-repeat dengan daftar dinamis, tanpa membangun kembali seluruh pohon DOM?


Saya menggunakan ng-repeat pada baris tabel dengan data dari array JSON yang diambil dari server. Tujuan saya adalah memperbarui daftar secara otomatis setiap kali suatu item ditambahkan, dihapus, atau diubah pada server, tanpa mempengaruhi item yang tidak dimodifikasi. Dalam implementasi terakhir, baris tabel ini juga akan berisi terikat secara bidirectional <input> dan <select> elemen untuk mengirim pembaruan kembali ke server. Beberapa opsi yang tersedia di <select> elemen juga akan dihasilkan menggunakan perintah ng-repeat dari daftar lain yang mungkin juga berubah.

Sejauh ini, setiap kali array baru berasal dari server (saat ini disurvei setiap dua detik), seluruh daftar ng-repeat dihapus dan diregenerasi. Ini bermasalah karena mengganggu pemilihan teks, menghancurkan bidang masukan bahkan jika saat ini sedang diedit oleh pengguna, dan mungkin berjalan jauh lebih lambat dari yang diperlukan.

Saya telah menulis aplikasi web lain yang melakukan apa yang saya inginkan menggunakan manipulasi DOM dan jQuery, tetapi kode akhirnya menjadi sangat berbulu dan pengembangannya sangat memakan waktu. Saya berharap untuk menggunakan AngularJS dan data yang mengikat untuk mencapai ini dalam pecahan dari kode dan waktu.

Jadi, inilah pertanyaannya: apakah mungkin untuk memperbarui backing array dengan cara ini, tetapi hanya memodifikasi elemen DOM yang sesuai dengan item / properti yang benar-benar berubah?


Berikut adalah test case minimal yang mensimulasikan polling periodik menggunakan array hard-coded dalam timer (lihat langsung di http://jsfiddle.net/DWrmP/). Perhatikan bahwa pemilihan teks dibersihkan setiap 500ms karena elemen yang dihapus dan diciptakan kembali.

HTML

<body ng-app="myApp">
    <table ng-controller="MyController">
        <tr ng-repeat="item in items | orderBy:'id'">
            <td>{{item.id}}</td>
            <td>{{item.data}}</td>
        </tr>
    </table>
</body>

JavaScript

angular.module('myApp', []).controller(
    'MyController', [
        '$scope', '$timeout',
        function($scope, $timeout) {
            $scope.items = [
                { id: 0, data: 'Zero' }
            ];

            function setData() {
                $scope.items = [
                    { id: 1, data: 'One' },
                    { id: 2, data: 'Two' },
                    { id: 5, data: 'Five' },
                    { id: 4, data: 'Four' },
                    { id: 3, data: 'Three' }
                    ];
                $timeout(setData, 500);
            }
            $timeout(setData, 500);
        }
        ]
);

32
2018-06-13 05:00


asal


Jawaban:


Bagi mereka yang menemukan ini dari google, halaman di bawah ini menjelaskan fitur di AngularJS 1.2 yang membantu masalah ini:

http://www.bennadel.com/blog/2556-Using-Track-By-With-ngRepeat-In-AngularJS-1-2.htm


Edit untuk menambahkan: Kalimat yang paling penting dari pos terkait, seandainya tautan pernah mati:

Dengan sintaks "track by" yang baru, saya sekarang dapat memberi tahu AngularJS properti objek (atau path properti) yang harus digunakan untuk mengaitkan objek JavaScript dengan node DOM. Ini berarti saya bisa menukar objek JavaScript tanpa merusak node DOM selama asosiasi "lacak oleh" masih berfungsi.


36
2018-01-15 21:18



Saya percaya artikel ini akan menjelaskan bagaimana ngRepeat bekerja

http://www.bennadel.com/blog/2443-Rendering-DOM-Elements-With-ngRepeat-In-AngularJS.htm

Jadi jika Anda menyimpan objek dalam koleksi - maka ya (saya e $ hashKey bertahan)

Jika tidak - tidak


7
2018-06-13 05:07



Saya berencana untuk membangun solusi berikut sendiri pada akhirnya meskipun masih dalam backlog produk saya.

Masalah dengan ng-repeat adalah ia akan menghapus item-item dari DOM ketika diperlukan begitu untuk sebuah tabel yang berarti itu akan mengubah ukuran dan semacamnya, tetapi jika datanya dinamis, ia mungkin akan berkedip karena data berubah sekitar dan ukuran tabel sedang bergeser. Khususnya selama pager karena seluruh halaman mungkin belum dimuat.

Untuk menyiasati kedipan ini, tabel tidak boleh mengubah jumlah barisnya. Alih-alih memiliki pengulangan-ng dari "ditampilkan" data dan hanya mengubahnya sesuai kebutuhan tanpa menambah atau menghapus item dari array.


0
2018-04-17 04:45