在我的作用域中有一个对象数组，我想观察每个对象的所有值。
这是我的代码:
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.changePass = function(data){ if(data.txtNewConfirmPassword !== data.txtNewPassword){ $scope.confirmStatus = true; }else{ $scope.confirmStatus = false; } }; <form class="list" name="myForm"> <label class="item item-input"> <input type="password" placeholder="ใส่รหัสผ่านปัจจุบัน" ng-model="data.txtCurrentPassword" maxlength="5" required> </label> <label class="item item-input"> <input type="password" placeholder="ใส่รหัสผ่านใหม่" ng-model="data.txtNewPassword" maxlength="5" ng-minlength="5" name="checknawPassword" ng-change="changePass(data)" required> </label> <label class="item item-input"> <input type="password" placeholder="ใส่รหัสผ่านใหม่ให้ตรงกัน" ng-model="data.txtNewConfirmPassword" maxlength="5" ng-minlength="5" name="checkConfirmPassword" ng-change="changePass(data)" required> </label> <div class="spacer" style="width: 300px; height: 5px;"></div> <span style="color:red" ng-show="myForm.checknawPassword.$error.minlength || myForm.checkConfirmPassword.$error.minlength">รหัสผ่านต้องมีจำนวน 5 หลัก</span><br> <span ng-show="confirmStatus" style="color:red">รหัสผ่านใหม่ไม่ตรงกัน</span> <br> <button class="button button-positive button-block" ng-click="saveChangePass(data)" ng-disabled="myForm.$invalid || confirmStatus">เปลี่ยน</button> </form>
如果你只看一个数组，你可以简单地使用这段代码:
$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，因为它可以处理以“$”开头的成员，也可以处理其他可能的情况。
值得注意的是，在Angular 1.1中。x和以上，你现在可以使用$watchCollection而不是$watch。虽然$watchCollection看起来创建的是浅表，所以它不能像你期望的那样处理对象数组。它可以检测数组的添加和删除，但不能检测数组内对象的属性。
在我的例子中，我需要监视一个服务，该服务包含一个地址对象，也由其他几个控制器监视。我陷入了一个循环，直到我添加了“true”参数，这似乎是观察对象时成功的关键。
$scope.$watch(function() {
return LocationService.getAddress();
}, function(address) {
//handle address object
}, true);
下面是观察作用域变量的3种方法的比较和示例:
$watch()由以下方式触发:
$scope.myArray = [];
$scope.myArray = null;
$scope.myArray = someOtherArray;
$watchCollection()由以上所有AND触发:
$scope.myArray.push({}); // add element
$scope.myArray.splice(0, 1); // remove element
$scope.myArray[0] = {}; // assign index to different value
美元的手表(…， true)由以上所有和触发:
$scope.myArray[0].someProperty = "someValue";
还有一件事……
$watch()是唯一一个在数组被另一个数组替换时触发的数组，即使另一个数组具有完全相同的内容。
例如，$watch()会触发而$watchCollection()不会:
$scope.myArray = ["Apples", "Bananas", "Orange" ];
var newArray = [];
newArray.push("Apples");
newArray.push("Bananas");
newArray.push("Orange");
$scope.myArray = newArray;
下面是一个JSFiddle示例的链接，该示例使用所有不同的手表组合，并输出日志消息来指示哪些“手表”被触发:
http://jsfiddle.net/luisperezphd/2zj9k872/
