¿Cómo mirar en profundidad una matriz en angularjs?

Hay una variedad de objetos en mi alcance, quiero ver todos los valores de cada objeto.

Este es mi código:

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

Pero cuando modifico los valores, por ejemplo, cambio TITLEa TITLE2, alert('columns changed')nunca aparece.

¿Cómo mirar profundamente los objetos dentro de una matriz?

Hay una demostración en vivo: http://jsfiddle.net/SYx9b/

Puede establecer el tercer argumento de $watcha true:

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

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

Desde Angular 1.1.x también puede usar $ watchCollection para ver el reloj superficial (solo el "primer nivel" de) la colección.

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

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

Hay consecuencias de rendimiento al sumergirse en un objeto en su $ watch. A veces (por ejemplo, cuando los cambios son solo empujones y estallidos), es posible que desee $ mirar un valor fácilmente calculado, como array.length.

Si va a ver solo una matriz, simplemente puede usar este bit de código:

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

ejemplo

Pero esto no funcionará con múltiples matrices:

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

ejemplo

Para manejar esta situación, generalmente convierto las múltiples matrices que quiero ver en JSON:

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

ejemplo

Como @jssebastian señaló en los comentarios, JSON.stringifypuede ser preferible angular.toJsonya que puede manejar miembros que comienzan con '$' y otros posibles casos también.

Vale la pena señalar que en Angular 1.1.xy superior, ahora puede usar $ watchCollection en lugar de $ watch. Aunque $ watchCollection parece crear relojes poco profundos, por lo que no funcionará con conjuntos de objetos como usted espera. Puede detectar adiciones y eliminaciones a la matriz, pero no las propiedades de los objetos dentro de las matrices.

Aquí hay una comparación de las 3 formas en que puede ver una variable de alcance con ejemplos:

$ watch () se activa por:

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

$ watchCollection () se activa por todo lo anterior Y:

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

$ watch (..., true) se activa por TODO lo anterior Y:

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

SOLO UNA COSA MÁS...

$ watch () es el único que se activa cuando una matriz se reemplaza por otra matriz, incluso si esa otra matriz tiene el mismo contenido exacto.

Por ejemplo, dónde $watch()se dispararía y $watchCollection()no:

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

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

$scope.myArray = newArray;

A continuación hay un enlace a un ejemplo de JSFiddle que utiliza todas las diferentes combinaciones de relojes y envía mensajes de registro para indicar qué "relojes" se activaron:

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

$ watchCollection logra lo que quieres hacer. A continuación se muestra un ejemplo copiado del sitio web de angularjs http://docs.angularjs.org/api/ng/type/$rootScope.Scope Si bien es conveniente, el rendimiento debe tenerse en cuenta especialmente cuando mira una gran colecció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);

Esta solución funcionó muy bien para mí, estoy haciendo esto en una directiva:

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

Lo verdadero funciona bastante bien y reacciona para todos los cambios (agregar, eliminar o modificar un campo).

Aquí hay un saqueador para jugar con él.

Mirando profundamente una matriz en AngularJS

Espero que esto te sea útil. Si tiene alguna pregunta, no dude en preguntar, intentaré ayudar :)

En mi caso, necesitaba ver un servicio, que contiene un objeto de dirección también observado por varios otros controladores. Estaba atrapado en un bucle hasta que agregué el parámetro 'verdadero', que parece ser la clave del éxito al mirar objetos.

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

Definir el objectEqualityparámetro (tercer parámetro) de la $watchfunción es definitivamente la forma correcta de ver TODAS las propiedades de la matriz.

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

Piran responde esto bastante bien y menciona $watchCollectiontambién.

Mas detalle

La razón por la que estoy respondiendo una pregunta ya respondida es porque quiero señalar que la respuesta de wizardwerdna no es buena y no debe usarse.

El problema es que los resúmenes no ocurren de inmediato. Tienen que esperar hasta que el bloque de código actual se haya completado antes de ejecutar. Por lo tanto, ver cómo lengthuna matriz puede perder algunos cambios importantes que $watchCollectionatraparán.

Asuma esta configuración:

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

A primera vista, puede parecer que se dispararían al mismo tiempo, como en este caso:

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

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

Eso funciona bastante bien, pero considera esto:

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

// Console output
// testArray changed

Tenga en cuenta que la longitud resultante fue la misma a pesar de que la matriz tiene un nuevo elemento y perdió un elemento, por lo que, en lo que $watchrespecta al reloj , lengthno ha cambiado. $watchCollectionSin embargo, lo entendí.

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

// Console output
// testArray change

El mismo resultado ocurre con un push y pop en el mismo bloque.

Conclusión

Para ver todas las propiedades de la matriz, use a $watchen la matriz con el tercer parámetro (objectEquality) incluido y establecido en verdadero. Sí, esto es costoso pero a veces necesario.

Para ver cuándo el objeto entra / sale de la matriz, use a $watchCollection.

NO use a $watchen la lengthpropiedad de la matriz. Casi no hay una buena razón para pensar en hacerlo.