AngularJS : watching a particular property in an array of objects for changes in the property's value

在我的自定义指令中，我要根据数据源数组中对象的数量向DOM中添加元素。我需要观看每个对象中的特定属性。当我将这些元素添加到DOM时，我想在checked数组中每个对象的toppings属性上设置一个$ watch，但是它不起作用，我也不知道为什么。我在函数内部设置了一个断点，当属性从true更改为false或从false更改为true时应调用该断点，但永远不要调用该函数。原因明显吗？我只是在学习Angular，所以我很容易犯一个愚蠢的错误。

$scope.bits = 66;  (i.e. onions and olives)


$scope.toppings = [
    { topping: 1, bits: 2, name: 'onions' },
    { topping: 2, bits: 4, name: 'mushrooms' },
    { topping: 3, bits: 8, name: 'peppers' },
    { topping: 4, bits: 16, name: 'anchovies' },
    { topping: 5, bits: 32, name: 'artichokes' },
    { topping: 6, bits: 64, name: 'olives' },
    { topping: 7, bits: 128, name: 'sausage' },
    { topping: 8, bits: 256, name: 'pepperoni' }
     ]

模型中的每个对象都会获得一个新的checked属性，该属性将为true或false。

注意:对象数组最多将包含十几个项目。性能不是问题。

link: function link(scope, iElement, iAttrs, controller, transcludeFn) {


  <snip>

 // At this point  scope.model refers to $scope.toppings. Confirmed.

  angular.forEach(scope.model, function (value, key) {

     // bitwise: set checked to true|false based on scope.bits and topping.bits

     scope.model[key].checked = ((value.bits & scope.bits) > 0);


     scope.$watch(scope.model[key].checked, function () {
         var totlBits = 0;
         for (var i = 0; i < scope.model.length; i++) {
            if (scope.model[i].checked) totlBits += scope.model[i].bits;
         }
          scope.bits = totlBits;
      });

   });

     <snip>

最佳答案

$ scope。$ watch的watchExpression参数应该是字符串或函数。我没有对此进行广泛的实验(我尝试尽可能避免使用显式监视)，但是当您将“简单”范围属性作为对象引用进行监视时，它也可以工作，但是对于更复杂的引用，效果却不那么理想。

我认为如果您以字符串形式提供引用，例如'model ['+ key +'] .checked'，那么您可能会取得一些成功(我之所以这样说是因为我之前对$ watchCollection做过类似的操作)。

另外，您应该能够提供功能，例如
$scope.$watch(function() { return scope.model[key].checked; }, function() { ... });
希望这可以帮助!

关于AngularJS : watching a particular property in an array of objects for changes in the property's value，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26553150/