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

Answer 4

我解決了這個解決方案：

$scope.updateFields= function(){
    angular.forEach($scope.fields,function (value, key) {
        value.title = value.title.toLowerCase().replace(/\s+/g,'');
    })
};
$scope.$watch('fields', $scope.updateFields, true);