Question

我有一组具有多个可编辑属性的对象。

**更新

例如对象

var objA = {
   propA:'vala',
   propB:'valb',
   propC:'valc',
   propD:'vald'
}

和数组

var a1 = [objA,objA,objA,objA,objA.... ]

我想在objA中的每个属性发生变化时执行单独的操作。它尝试了深度监视，但它返回旧数组和新数组。这意味着我必须实现变更检测的逻辑。

我很确定我错过了一些东西，因为在其他框架中有更多有效的方法。是否有任何有效的方式来做到这一点？

Answer 1

您可以这样做：

var watcher = function(nv, ov, scope) {
  var props = Object.keys(nv);
  for (var i = props.length - 1; i >= 0; i--) {
    var prop = props[i];
    if (nv[prop] !== ov[prop])
      console.log('%s prop has been changed!', prop);  
  }
}

$scope.$watch('objA', watcher, true);

如果对象的值不是原始javascript类型，则可以使用angular.equals函数进行比较。

Answer 2

角度没有很好的记录，但至少有两种方法可以做你想要的。

方法1：传递带标记的字符串

您可以使用$ watch通过使用javascript表示法作为字符串向下钻取到单个属性，如下所示：

$scope.$watch('objA.propA', function(newVal, oldVal){
   // do something
});

只要您传递的字符串可以在范围级别进行评估，它就可以工作。由于对象存储在作用域的数组中，因此您需要手动路径到它们，或者在循环中动态创建路径。例如：

$scope.$watch("a1[1].propA", function(newVal, oldVal) {
   // do something
});
$scope.$watch("a1[1].propB", function(newVal, oldVal) {
   // do something
});
$scope.$watch("a1[2].propA", function(newVal, oldVal) {
   // do something
});
$scope.$watch("a1[2].propB", function(newVal, oldVal) {
   // do something
});
// etc...

... OR

for (var i=0; i < $scope.a1.length; i++) {
   $scope.$watch("a1[" + i + "].propA", function(newVal, oldVal) {
      // do something
   });
   $scope.$watch("a1[" + i + "].propB", function(newVal, oldVal) {
      // do something
   });
   // etc...
}

所有人都说...你最终可能会用这种方法添加很多手表。可能会对性能产生影响。

你可以在这里看到一个有效的插件：http://plnkr.co/edit/QJHxXTJX9HYV8BmbddyR?p=preview

方法2：传递功能

或者，您可以迭代数组并将函数传递给直接引用属性的监视，如下所示：

for (var i=0; i < $scope.a1.length; i++) {

   $scope.$watch(function() {
     return $scope.a1[i].propA;
   }, function(newVal, oldVal) {
     // references a1[i].propA
   });

   $scope.$watch(function() {
     return $scope.a1[i].propB;
   }, function(newVal, oldVal) {
     // references a1[i].propB
   });

   $scope.$watch(function() {
     return $scope.a1[i].propC;
   }, function(newVal, oldVal) {
     // references a1[i].propC
   });

   $scope.$watch(function() {
     return $scope.a1[i].propC;
   }, function(newVal, oldVal) {
     // references a1[i].propC
   });
}

再一次，观察你的表现。

Angular JS如何观看“Only One Property”

2 个答案: