Bagaimana cara menonton array dalam angularjs?

Ada array objek dalam lingkup saya, saya ingin menonton semua nilai dari setiap objek.

Ini kode saya:

function TodoCtrl($scope) {
  $scope.columns = [
      { field:'title', displayName: 'TITLE'},
      { field: 'content', displayName: 'CONTENT' }
  ];
   $scope.$watch('columns', function(newVal) {
       alert('columns changed');
   });
}

Tapi ketika saya mengubah nilai-nilai, misalnya saya perubahan TITLEuntuk TITLE2, yang alert('columns changed')tidak pernah muncul.

Bagaimana cara mengamati objek di dalam array secara mendalam?

Ada demo langsung: http://jsfiddle.net/SYx9b/

Anda dapat mengatur argumen ke-3 $watchmenjadi true:

$scope.$watch('data', function (newVal, oldVal) { /*...*/ }, true);

Lihat https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch

Sejak Angular 1.1.x Anda juga dapat menggunakan $ watchCollection untuk menonton arloji dangkal (hanya "level pertama" dari) koleksi.

$scope.$watchCollection('data', function (newVal, oldVal) { /*...*/ });

Lihat https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watchCollection

Ada konsekuensi kinerja untuk menyelam dalam suatu objek di $ watch Anda. Terkadang (misalnya, ketika perubahan hanya mendorong dan muncul), Anda mungkin ingin $ menonton nilai yang mudah dihitung, seperti array.length.

Jika Anda hanya akan menonton satu array, Anda dapat menggunakan sedikit kode ini:

$scope.$watch('columns', function() {
  // some value in the array has changed 
}, true); // watching properties

contoh

Tetapi ini tidak akan berfungsi dengan banyak array:

$scope.$watch('columns + ANOTHER_ARRAY', function() {
  // will never be called when things change in columns or ANOTHER_ARRAY
}, true);

contoh

Untuk menangani situasi ini, saya biasanya mengonversi banyak array yang ingin saya tonton menjadi JSON:

$scope.$watch(function() { 
  return angular.toJson([$scope.columns, $scope.ANOTHER_ARRAY, ... ]); 
},
function() {
  // some value in some array has changed
}

contoh

Seperti @jssebastian tunjukkan dalam komentar, JSON.stringifymungkin lebih disukai angular.toJsonkarena dapat menangani anggota yang mulai dengan '$' dan kemungkinan kasus lainnya juga.

Perlu dicatat bahwa dalam Angular 1.1.x dan di atasnya, Anda sekarang dapat menggunakan $ watchCollection daripada $ watch. Meskipun $ watchCollection tampaknya membuat arloji dangkal sehingga tidak akan berfungsi dengan array objek seperti yang Anda harapkan. Ia dapat mendeteksi penambahan dan penghapusan array, tetapi bukan properti objek di dalam array.

Berikut ini adalah perbandingan dari 3 cara Anda dapat menonton variabel lingkup dengan contoh:

$ watch () dipicu oleh:

$scope.myArray = [];
$scope.myArray = null;
$scope.myArray = someOtherArray;

$ watchCollection () dipicu oleh semua yang di atas DAN:

$scope.myArray.push({}); // add element
$scope.myArray.splice(0, 1); // remove element
$scope.myArray[0] = {}; // assign index to different value

$ watch (..., true) dipicu oleh SEMUANYA di atas DAN:

$scope.myArray[0].someProperty = "someValue";

HANYA SATU LAGI...

$ tonton () adalah satu-satunya yang memicu ketika array diganti dengan array lain bahkan jika array lain itu memiliki konten yang persis sama.

Misalnya di mana $watch()akan menembak dan $watchCollection()tidak akan:

$scope.myArray = ["Apples", "Bananas", "Orange" ];

var newArray = [];
newArray.push("Apples");
newArray.push("Bananas");
newArray.push("Orange");

$scope.myArray = newArray;

Di bawah ini adalah tautan ke contoh JSFiddle yang menggunakan semua kombinasi arloji dan pesan log keluaran yang berbeda untuk menunjukkan "jam tangan" mana yang dipicu:

http://jsfiddle.net/luisperezphd/2zj9k872/

$ watchCollection menyelesaikan apa yang ingin Anda lakukan. Di bawah ini adalah contoh yang disalin dari situs web angularjs http://docs.angularjs.org/api/ng/type/$rootScope.Scope Meskipun nyaman, kinerja perlu dipertimbangkan terutama ketika Anda menonton koleksi besar.

  $scope.names = ['igor', 'matias', 'misko', 'james'];
  $scope.dataCount = 4;

  $scope.$watchCollection('names', function(newNames, oldNames) {
     $scope.dataCount = newNames.length;
  });

  expect($scope.dataCount).toEqual(4);
  $scope.$digest();

  //still at 4 ... no changes
  expect($scope.dataCount).toEqual(4);

  $scope.names.pop();
  $scope.$digest();

  //now there's been a change
  expect($scope.dataCount).toEqual(3);

Solusi ini bekerja sangat baik untuk saya, saya melakukan ini dalam arahan:

scope. $ watch (attrs.testWatch, function () {.....}, true);

yang sebenarnya berfungsi dengan sangat baik dan bereaksi untuk semua chnage (menambah, menghapus, atau memodifikasi bidang).

Ini adalah plunker yang berfungsi untuk bermain dengannya.

Sangat Menonton Array di AngularJS

Semoga ini bermanfaat bagi Anda. Jika Anda memiliki pertanyaan, jangan ragu untuk bertanya, saya akan mencoba membantu :)

Dalam kasus saya, saya perlu menonton layanan, yang berisi objek alamat juga ditonton oleh beberapa pengontrol lainnya. Saya terjebak dalam satu lingkaran sampai saya menambahkan parameter 'benar', yang tampaknya menjadi kunci keberhasilan ketika menonton objek.

$scope.$watch(function() {
    return LocationService.getAddress();
}, function(address) {
    //handle address object
}, true);

Mengatur objectEqualityparameter (parameter ketiga) dari $watchfungsi jelas merupakan cara yang benar untuk menonton SEMUA properti array.

$scope.$watch('columns', function(newVal) {
    alert('columns changed');
},true); // <- Right here

Piran menjawab ini dengan cukup baik dan menyebutkan $watchCollectionjuga.

Lebih detail

Alasan saya menjawab pertanyaan yang sudah dijawab adalah karena saya ingin menunjukkan bahwa jawaban wizardwerdna bukan jawaban yang baik dan tidak boleh digunakan.

Masalahnya adalah bahwa pencernaan tidak terjadi dengan segera. Mereka harus menunggu sampai blok kode saat ini selesai sebelum dieksekusi. Dengan demikian, menonton lengtharray sebenarnya dapat melewatkan beberapa perubahan penting yang $watchCollectionakan ditangkap.

Asumsikan konfigurasi ini:

$scope.testArray = [
    {val:1},
    {val:2}
];

$scope.$watch('testArray.length', function(newLength, oldLength) {
    console.log('length changed: ', oldLength, ' -> ', newLength);
});

$scope.$watchCollection('testArray', function(newArray) {
    console.log('testArray changed');
});

Sekilas, sepertinya ini akan menyala pada saat yang sama, seperti dalam kasus ini:

function pushToArray() {
    $scope.testArray.push({val:3});
}
pushToArray();

// Console output
// length changed: 2 -> 3
// testArray changed

Itu cukup berhasil, tetapi pertimbangkan ini:

function spliceArray() {
    // Starting at index 1, remove 1 item, then push {val: 3}.
    $testArray.splice(1, 1, {val: 3});
}
spliceArray();

// Console output
// testArray changed

Perhatikan bahwa panjang yang dihasilkan adalah sama meskipun array memiliki elemen baru dan kehilangan elemen, sehingga jam tangan yang $watchterkait lengthtidak berubah. $watchCollectionmengambilnya, meskipun.

function pushPopArray() {
    $testArray.push({val: 3});
    $testArray.pop();
}
pushPopArray();

// Console output
// testArray change

Hasil yang sama terjadi dengan push dan pop di blok yang sama.

Kesimpulan

Untuk menonton setiap properti dalam array, gunakan a $watchpada array itu sendiri dengan parameter ketiga (objectEquality) disertakan dan disetel ke true. Ya, ini mahal tapi terkadang perlu.

Untuk menonton saat objek masuk / keluar dari array, gunakan a $watchCollection.

JANGAN gunakan $watchpada lengthproperti array. Hampir tidak ada alasan bagus yang bisa saya pikirkan untuk melakukannya.