Angular JS如何观看“唯一财产”

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：传递带符号的字符串

您可以通过使用JavaScript符号作为字符串来使用$ watch向下钻取单个属性，如下所示：

$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...

要么...

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...
}

话虽如此...您可能最终会用这种方法添加很多手表。 可能会对性能产生影响。

您可以在此处查看工作正常的plunkr： 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
   });
}

再次观看您的表演。