在我的作用域中有一个对象数组,我想观察每个对象的所有值。

这是我的代码:

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.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>

其他回答

值得注意的是,在Angular 1.1中。x和以上,你现在可以使用$watchCollection而不是$watch。虽然$watchCollection看起来创建的是浅表,所以它不能像你期望的那样处理对象数组。它可以检测数组的添加和删除,但不能检测数组内对象的属性。

在$watch中深潜一个对象会对性能造成影响。有时(例如,当更改仅为推和弹出时),您可能希望$watch一个容易计算的值,例如array.length。

在我的例子中,我需要监视一个服务,该服务包含一个地址对象,也由其他几个控制器监视。我陷入了一个循环,直到我添加了“true”参数,这似乎是观察对象时成功的关键。

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

你可以设置$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美元

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