AngularJS在对象数组中观察对象属性

Question

我data在控制器中有这个

    $scope.data = {
        home: {
            baseValue: "1",
            name: "home"
        },
        contact: {
            baseValue: "2",
            name: "contract"
        }
     // a lot more options
    };

有一些像这样的HTML:

<section class="content row" ng-repeat="item in data">
   {{item.name}}
   ....
</section>

现在,我想知道什么时候发生了baseValue变化,但由于我在数据变量中使用了一个对象,我不能watch以更简单的方式使用该属性.

我尝试过类似的东西,但我必须循环所有数组

$scope.$watch('data', function (newValue, oldValue, scope) {
 // some code to compare the tow arrays, line by line
}, true);

我怎样才能更简单$watch地知道什么时候baseValue改变了？

类似的问题:

• AngularJS监视数据更改对象的数组
• 如何获得angularjs中更改的对象？
• 如何深度观察angularjs中的数组？

更新 1

我可以为每个对象添加一个单独的监视器,以便知道何时baseValue更改,但如果我有n多个对象,不仅仅是像这个示例中的几个对象那样也不会很好

$scope.$watch('data.home', function (newValue, oldValue, scope) {
 // do some stuff with newvalue.baseValue
}, true);

$scope.$watch('data.contact', function (newValue, oldValue, scope) {
 // do some stuff with newvalue.baseValue
}, true);
... // Adds more individual `watch`

Answer 1

根据您的问题,您可以使用ngChange来观察更改baseValue并触发该功能.

HTML

<section class="content row" ng-repeat="item in data">
    Name: {{item.name}} <br/>
    BaseValue: <input type="text" ng-model="item.baseValue" ng-change="baseValueChange(item.baseValue)"/>
</section>

调节器

$scope.baseValueChange = function(baseValue) {
    console.log("base value change", baseValue);
}

如果你是一个更复杂的版本,可以获得oldValue和newValue,你可以参考这个plunkr - http://plnkr.co/edit/hqWRG13gzT9H5hxmOIkO?p=preview

HTML

<section class="content row" ng-repeat="item in data">
    Name: {{item.name}} <br/>
    BaseValue: <input type="text" ng-init="item.oldBaseValue = item.baseValue" ng-model="item.baseValue" ng-change="baseValueChange(item.oldBaseValue, item.baseValue); item.oldBaseValue = item.baseValue"/>
</section>

调节器

$scope.baseValueChange = function(oldVal, newVal) {
    console.log("base value change", oldVal, newVal);
}

Answer 2

您可以观看对象属性.
所以你可以做点什么

for(var key in $scope.data) {
  if($scope.data.hasOwnProperty(key)) {
    $scope.$watch("data['" + key + "'].baseValue", function(val, oldVal) {
      // Do stuff
    });
  }
}

没有经过测试,但想法很简单.

Answer 3

在这种情况下，无法避免使用多个$watchCollection监视，另一种方法是利用监视对象值的数组，您可以使用该Object.values函数获取该数组。

scope.$watchCollection(function() {
    return Object.values(obj);
}, function(newValues, oldValues) {
    // now you are watching all the values for changes!
    // if you want to fire a callback with the object as an argument:
    if (angular.isFunction(scope.callback())) {
        scope.callback()(obj);
    }
});