Làm thế nào để xem sâu một mảng trong angularjs?

Có một mảng các đối tượng trong phạm vi của tôi, tôi muốn xem tất cả các giá trị của từng đối tượng.

Đây là mã của tôi:

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

Nhưng khi tôi sửa đổi các giá trị, ví dụ tôi thay đổi TITLEthành TITLE2, alert('columns changed')không bao giờ xuất hiện.

Làm thế nào để theo dõi sâu các đối tượng bên trong một mảng?

Có bản demo trực tiếp: http://jsfiddle.net/SYx9b/

Bạn có thể thiết lập các tham số thứ 3 của $watchđể true:

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

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

Kể từ Angular 1.1.x, bạn cũng có thể sử dụng $ watchCollection để xem đồng hồ nông (chỉ là "cấp độ đầu tiên") của bộ sưu tập.

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

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

Có những hậu quả về hiệu suất khi lặn sâu một đối tượng trong chiếc đồng hồ $ của bạn. Đôi khi (ví dụ: khi các thay đổi chỉ được đẩy và bật), bạn có thể muốn $ xem một giá trị được tính toán dễ dàng, chẳng hạn như mảng.length.

Nếu bạn chỉ xem một mảng, bạn chỉ cần sử dụng đoạn mã này:

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

thí dụ

Nhưng điều này sẽ không hoạt động với nhiều mảng:

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

thí dụ

Để xử lý tình huống này, tôi thường chuyển đổi nhiều mảng tôi muốn xem thành JSON:

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

thí dụ

Như @jssebastian đã chỉ ra trong các bình luận, JSON.stringifycó thể thích hợp hơn angular.toJsonvì nó có thể xử lý các thành viên bắt đầu bằng '$' và các trường hợp khác cũng có thể xảy ra.

Điều đáng chú ý là trong Angular 1.1.x trở lên, giờ đây bạn có thể sử dụng $ watchCollection thay vì $ watch. Mặc dù $ watchCollection xuất hiện để tạo ra những chiếc đồng hồ nông nên nó sẽ không hoạt động với các đối tượng như bạn mong đợi. Nó có thể phát hiện các bổ sung và xóa vào mảng, nhưng không phát hiện các thuộc tính của các đối tượng bên trong mảng.

Dưới đây là so sánh về 3 cách bạn có thể xem biến phạm vi với các ví dụ:

$ watch () được kích hoạt bởi:

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

$ watchCollection () được kích hoạt bởi mọi thứ ở trên VÀ:

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

$ watch (..., true) được kích hoạt bởi MỌI THỨ ở trên VÀ:

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

CHỈ CÓ MỘT THÊM ...

$ watch () là cái duy nhất kích hoạt khi một mảng được thay thế bằng một mảng khác ngay cả khi mảng khác đó có cùng nội dung chính xác.

Ví dụ, nơi $watch()sẽ bắn và $watchCollection()sẽ không:

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

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

$scope.myArray = newArray;

Dưới đây là một liên kết đến một ví dụ JSFiddle sử dụng tất cả các kết hợp đồng hồ và thông báo nhật ký đầu ra khác nhau để cho biết "đồng hồ" nào đã được kích hoạt:

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

$ watchCollection hoàn thành những gì bạn muốn làm. Dưới đây là một ví dụ được sao chép từ trang web angularjs http://docs.angularjs.org/api/ng/type/$rootScope.Scope Trong khi thuận tiện, hiệu suất cần được xem xét đặc biệt là khi bạn xem một bộ sưu tập lớn.

  $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);

Giải pháp này hoạt động rất tốt đối với tôi, tôi đang thực hiện điều này trong một chỉ thị:

phạm vi. $ watch (attrs.testWatch, function () {.....}, true);

sự thật hoạt động khá tốt và phản ứng cho tất cả các chnages (thêm, xóa hoặc sửa đổi một trường).

Đây là một plunker làm việc để chơi với nó.

Xem sâu một mảng trong AngularJS

Tôi hy vọng điều này có thể hữu ích cho bạn. Nếu bạn có bất kỳ câu hỏi nào, cứ thoải mái hỏi, tôi sẽ cố gắng giúp :)

Trong trường hợp của tôi, tôi cần xem một dịch vụ chứa đối tượng địa chỉ cũng được xem bởi một số bộ điều khiển khác. Tôi bị mắc kẹt trong một vòng lặp cho đến khi tôi thêm tham số 'true', dường như là chìa khóa thành công khi xem các đối tượng.

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

Đặt objectEqualitytham số (tham số thứ ba) của $watchhàm chắc chắn là cách chính xác để xem TẤT CẢ các thuộc tính của mảng.

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

Piran trả lời điều này đủ tốt và cũng đề cập đến $watchCollection.

Thêm chi tiết

Lý do tôi trả lời một câu hỏi đã được trả lời là vì tôi muốn chỉ ra rằng câu trả lời của wizardwerdna không phải là câu hỏi hay và không nên sử dụng.

Vấn đề là các tiêu hóa không xảy ra ngay lập tức. Họ phải đợi cho đến khi khối mã hiện tại hoàn thành trước khi thực thi. Vì vậy, xem lengthmột mảng thực sự có thể bỏ lỡ một số thay đổi quan trọng $watchCollectionsẽ bắt.

Giả sử cấu hình này:

$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');
});

Thoạt nhìn, có vẻ như những thứ này sẽ bắn cùng một lúc, chẳng hạn như trong trường hợp này:

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

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

Điều đó hoạt động đủ tốt, nhưng xem xét điều này:

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

// Console output
// testArray changed

Lưu ý rằng độ dài kết quả là như nhau mặc dù mảng có một phần tử mới và bị mất một phần tử, do đó, khi xem $watchcó liên quan, lengthđã không thay đổi. $watchCollectionnhặt lên trên, mặc dù.

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

// Console output
// testArray change

Kết quả tương tự xảy ra với một lần đẩy và bật trong cùng một khối.

Phần kết luận

Để xem mọi thuộc tính trong mảng, hãy sử dụng a $watchtrên chính mảng đó với tham số thứ ba (objectEquality) được bao gồm và đặt thành true. Vâng, điều này là đắt tiền nhưng đôi khi cần thiết.

Để xem khi đối tượng nhập / thoát mảng, sử dụng a $watchCollection.

KHÔNG sử dụng a $watchtrên thuộc lengthtính của mảng. Hầu như không có lý do chính đáng nào tôi có thể nghĩ ra để làm như vậy.