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

时间:2014-07-22 00:18:29

标签: javascript angularjs

我的控制器中有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何时更改?

类似的问题:

更新 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`

4 个答案:

答案 0 :(得分:35)

根据您的问题,您可以使用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);
}

答案 1 :(得分:14)

您可以观看对象属性 所以你可以做类似

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

未经测试,但想法很简单。

答案 2 :(得分:3)

在这种情况下,没有办法规避使用多个手表,另一种方法是利用coefs <- data.frame(coef(summary(m))) coefs$p.z <- 2 * (1 - pnorm(abs(coefs$t.value))) coefs Estimate Std..Error t.value p.z (Intercept) 17.32329080 0.39098373 44.3069347 0.000000e+00 variable 0.61802971 0.03804828 16.2433009 0.000000e+00 DietDiet1 1.44932534 0.48893732 2.9642355 3.034360e-03 DietDiet2 18.76067056 0.76890739 24.3991289 0.000000e+00 来观察对象值数组,你可以使用{{1}来获取这个数组功能。

$watchCollection

答案 3 :(得分:1)

我用这个解决方案解决了:

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