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
   });
}

再次觀看您的表演。