angular：在对象数组中监视对象

24 浏览
0 Comments

angular：在对象数组中监视对象

比如，我有一个对象数组。\n$scope.items = [\n {id: 1, name: \'one\'},\n {id: 2, name: \'two\'},\n {id: 2, name: \'three\'}\n];\n并且在模板中有类似以下内容的代码：\n\n我想要为这个代码添加$watch（以便跟踪输入的变化）\n$scope.$watch(\'item\', function(newVal){}, true);\n如果我希望在newVal中得到像{id: 1, name: \'one\'}这样的对象，我需要做什么？\n不是对象数组！只有一个在newVal中发生变化的对象！\n我无法在控制器中为数组中的每个对象创建变量。\n我尝试了以下代码：\nfor (var i = 0; i < $scope.items.length; i++) {\n $scope.$watch(\'items[\' + i + \']\', function(newVal) {\n console.log(newVal);\n }, true);\n}\n但是这是错误的。

0

2 答案

0 Comments

问题的原因是，当使用`$watch`监视数组中对象的变化时，只能监视到对象的值的变化，而无法监视到整个对象的变化。

解决方法是，使用`$watchCollection`代替`$watch`来监视数组中对象的变化。`$watchCollection`可以监视到整个对象的变化，而不仅仅是对象的值的变化。

修改后的代码如下所示：

var app = angular
  .module('MyApp', [])
  .controller('Main', ['$scope', function($scope) {
      var vm = this;
      vm.items = [
          {id: 1, name: 'one'},
          {id: 2, name: 'two'},
          {id: 3, name: 'three'}
       ];
   for (var i = 0; i < vm.items.length; i++) {
     $scope.$watchCollection('ctrl.items[' + i + ']', function(newVal) {
        console.log(newVal);
       });
     }
  }
]);

修改后的HTML代码如下所示：

这样，就可以监视到数组中对象的整个变化了。

0
0 Comments

原因：当我们需要对一个数组中的对象进行监测时，使用AngularJS的$watch函数时，通常会遇到问题。因为$watch函数只能监测对象的引用是否发生变化，而无法监测对象内部属性的变化。

解决方法：可以使用上述代码来解决该问题。该代码通过遍历数组中的每个对象，并将每个对象的引用传递给$watch函数进行监测。这样就能够监测到数组中每个对象内部属性的变化了。

注意：上述代码尚未经过测试。

0