在我的作用域中有一个对象数组，我想观察每个对象的所有值。
这是我的代码:
function TodoCtrl($scope) {
$scope.columns = [
{ field:'title', displayName: 'TITLE'},
{ field: 'content', displayName: 'CONTENT' }
];
$scope.$watch('columns', function(newVal) {
alert('columns changed');
});
}
但是当我修改值时，例如我将TITLE更改为TITLE2，警报('列已更改')从未弹出。
如何深度观看数组内的对象?
有一个现场演示:http://jsfiddle.net/SYx9b/
当前回答
如果你只看一个数组，你可以简单地使用这段代码:
$scope.$watch('columns', function() {
// some value in the array has changed
}, true); // watching properties
例子
但这对多个数组无效:
$scope.$watch('columns + ANOTHER_ARRAY', function() {
// will never be called when things change in columns or ANOTHER_ARRAY
}, true);
例子
为了处理这种情况，我通常会将我想要观察的多个数组转换为JSON:
$scope.$watch(function() {
return angular.toJson([$scope.columns, $scope.ANOTHER_ARRAY, ... ]);
},
function() {
// some value in some array has changed
}
例子
正如@jssebastian在评论中指出的，JSON。Stringify可能比angular更好。toJson，因为它可以处理以“$”开头的成员，也可以处理其他可能的情况。
其他回答
如果你只看一个数组，你可以简单地使用这段代码:
$scope.$watch('columns', function() {
// some value in the array has changed
}, true); // watching properties
例子
但这对多个数组无效:
$scope.$watch('columns + ANOTHER_ARRAY', function() {
// will never be called when things change in columns or ANOTHER_ARRAY
}, true);
例子
为了处理这种情况，我通常会将我想要观察的多个数组转换为JSON:
$scope.$watch(function() {
return angular.toJson([$scope.columns, $scope.ANOTHER_ARRAY, ... ]);
},
function() {
// some value in some array has changed
}
例子
正如@jssebastian在评论中指出的，JSON。Stringify可能比angular更好。toJson，因为它可以处理以“$”开头的成员，也可以处理其他可能的情况。
你可以设置$watch的第3个参数为true:
$scope.$watch('data', function (newVal, oldVal) { /*...*/ }, true);
见https://docs.angularjs.org/api/ng/type/ rootScope.Scope #美元的手表
从Angular 1.1开始。x你也可以使用$watchCollection来观看浅表(只是“第一层”)的集合。
$scope.$watchCollection('data', function (newVal, oldVal) { /*...*/ });
见https://docs.angularjs.org/api/ng/type/ rootScope.Scope # watchCollection美元
在$watch中深潜一个对象会对性能造成影响。有时(例如，当更改仅为推和弹出时)，您可能希望$watch一个容易计算的值，例如array.length。
$watchCollection完成了您想要做的事情。下面是一个从angularjs网站http://docs.angularjs.org/api/ng/type/$rootScope.Scope复制的例子 虽然很方便，但性能也需要考虑在内，尤其是当你观看大量收藏时。
$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);
这个解决方案对我来说非常有效，我在一个指令中这样做:
范围。看(attrs美元。testWatch, function() {.....},真正的);
true工作得很好，并响应所有更改(添加、删除或修改字段)。
这是一个工作的活塞玩它。
在AngularJS中深度观察一个数组
我希望这对你有用。 如果你有任何问题，请尽管问，我会尽力帮助你的:)
