AngularJS 监听对象数组中的对象属性。

14 浏览
0 Comments

AngularJS 监听对象数组中的对象属性。

在我的控制器中有这个data：\n

    $scope.data = {
        home: {
            baseValue: "1",
            name: "home"
        },
        contact: {
            baseValue: "2",
            name: "contract"
        }
     // 还有很多选项
    };

\n还有一些类似这样的html代码：\n


   {{item.name}}
   ....

\n现在，我想知道当baseValue改变时，但由于我在data变量中使用了对象，所以不能简单地watch属性。\n我尝试了这样的代码，但是我必须循环遍历整个数组：\n

$scope.$watch('data', function (newValue, oldValue, scope) {
 // 一些比较两个数组的代码，逐行比较
}, true);

\n我该如何简单地使用$watch只知道baseValue何时改变？\n类似的问题：\n

\n更新 1\n我可以为每个对象添加一个单独的监视器来知道何时更改baseValue，但如果我有n个对象，而不仅仅是像这个示例中的几个对象，那将不太好。\n

$scope.$watch('data.home', function (newValue, oldValue, scope) {
 // 使用newvalue.baseValue做一些操作
}, true);
$scope.$watch('data.contact', function (newValue, oldValue, scope) {
 // 使用newvalue.baseValue做一些操作
}, true);
... //添加更多单独的`watch`

0

3 答案

0 Comments

在这种情况下，没有办法绕过使用多个监视器，另一种方法是使用$watchCollection来监视对象数组的值，您可以使用Object.values函数获取此数组。

scope.$watchCollection(function() {
    return Object.values(obj);
}, function(newValues, oldValues) {
    // 现在您正在监视所有值的变化！
    // 如果您想调用一个带有对象作为参数的回调函数：
    if (angular.isFunction(scope.callback())) {
        scope.callback()(obj);
    }
});

0
0 Comments

问题的出现原因：

问题的出现是因为使用AngularJS的ng-change指令只能监测到与绑定的输入交互时的数值变化，而无法监测到通过编程方式改变的数值。在这个问题中，希望能够在数组元素的baseValues发生变化时执行一些操作，而不管这些变化是通过绑定的输入还是通过编程方式进行的。

解决方法：

为了解决这个问题，可以使用AngularJS的$watch函数来监测对象属性的变化。具体的解决方法是使用一个循环遍历对象数组中的每个元素，然后使用$watch来监测每个元素的baseValue属性的变化。这样，无论这些变化是通过绑定的输入还是通过编程方式进行的，都能触发相应的操作。如果数组中的元素会动态添加和删除，还需要在移除元素时取消对应的$watch。

整理成一篇文章：

AngularJS中如何监测对象数组中的对象属性变化

在AngularJS中，我们可以使用ng-change指令来监测与绑定的输入交互时的数值变化。然而，有时我们希望能够监测到通过编程方式改变的数值，特别是在对象数组中的对象属性发生变化时。本文将介绍如何使用AngularJS的$watch函数来实现这个功能。

首先，让我们来看看一个简单的例子：

for(var key in $scope.data) {
  if($scope.data.hasOwnProperty(key)) {
    $scope.$watch("data['" + key + "'].baseValue", function(val, oldVal) {
      // 执行一些操作
    });
  }
}

在这个例子中，我们使用一个循环遍历对象数组中的每个元素，并使用$watch来监测每个元素的baseValue属性的变化。这样，无论这些变化是通过绑定的输入还是通过编程方式进行的，都能触发相应的操作。

如果数组中的元素会动态添加和删除，我们还需要在移除元素时取消对应的$watch。可以使用$watch函数返回的注销函数来实现这一点，示例如下：

var w = $scope.$watch(...);  // 监测元素的baseValue属性变化，并返回注销函数
...
w();  // 在移除元素时调用注销函数，取消$watch

需要注意的是，在监测对象属性变化时，我们需要正确地构造监测表达式。在这个例子中，我们使用了字符串拼接的方式构造监测表达式，如下所示：

$scope.$watch("data['" + key + "'].baseValue" .....);

然而，有时候字符串拼接可能会导致错误，特别是当键值中包含特殊字符时。为了避免这种情况，可以使用JSON.stringify函数来正确地构造监测表达式，示例如下：

$scope.$watch("data[" + JSON.stringify(key) + "].baseValue" .....);

通过使用AngularJS的$watch函数，我们可以监测对象数组中的对象属性变化。通过遍历对象数组，使用正确的监测表达式来构造$watch，我们可以在对象属性发生变化时执行相应的操作。如果数组中的元素会动态添加和删除，我们还需要在移除元素时取消对应的$watch。

0
0 Comments

AngularJS中的watch方法可以用来监视对象数组中的对象属性的变化。根据问题描述，可以使用ngChange来监视baseValue的变化并触发相应的函数。

HTML部分：


    Name: {{item.name}} 
    BaseValue:

控制器部分：

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

如果需要更复杂的版本，可以获得旧值和新值，可以参考以下plunkr示例：http://plnkr.co/edit/hqWRG13gzT9H5hxmOIkO?p=preview

HTML部分：


    Name: {{item.name}} 
    BaseValue:

控制器部分：

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

这种方法对我来说有效，但是使用ng-change会对性能产生影响吗？这是因为函数不仅在值变化时执行，还会在其他情况下执行。因此，最好使用$watch来确保只有在数据更新时才执行函数。这种说法正确吗？

我认为与使用watch方法相比并没有太大区别。你可以比较一下使用ng-change和watch方法时注册的监听器数量，我认为是一样的。

我同意+Coyolero的观点。在我的情况下，提供的解决方案更适合问题。

我不认为这是一个好答案，因为它只会在输入控件的更新上触发，而不会在代码中触发。

0