Question

想象一下，我有一个名为buckets的数组。该数组将包含名为bucket的对象，其中每个bucket都有一个名为images的属性，它是一个数组。示例：

vm.buckets = [
    {name: "bucket1", images: []},
    {name: "bucket2", images: []},
    {name: "bucket3", images: []}
]

我正在向vm.buckets动态添加新存储桶，但也会动态地向每个存储桶添加新图像。有没有办法创建一个新的$watchCollection并将其分配给每个新桶，以便我可以观察插入每个桶的新图像？

Answer 1

angular.module('app', []).controller('ctrl', function($scope) {
  var vm = this;
  vm.buckets = [
    { name: "bucket1", images: [] },
    { name: "bucket2", images: [] },
    { name: "bucket3", images: [] }    
  ];
  var counter = vm.buckets.length;
  
  vm.Addbucket = function() {
    var temp = {
      name: 'bucket' + (++counter),
      images: []
    };
    vm.buckets.push(temp);
    AddWatch(temp);
  }
  vm.DeleteLastBucket = function(){
    vm.buckets[vm.buckets.length - 1].unregisterWatch();
    vm.buckets.splice(vm.buckets.length - 1, 1);
  }

  function AddWatch(x) {
    var index = vm.buckets.indexOf(x);
    var id = `buckets[${index}].images`;    
    x.unregisterWatch = $scope.$watchCollection(id, function() {
      console.log(`Changes at ${x.name} images`);
    });    
  }

  $scope.buckets = vm.buckets;
  vm.buckets.forEach(AddWatch);
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>

<div ng-app='app' ng-controller='ctrl as vm'>
  <ul>
    <li ng-repeat='item in vm.buckets'>
      {{item.name}}: {{item.images.length}} images
      <button ng-click='item.images.push("temp")'>Add image</button>
    </li>
  </ul>
  <button ng-click='vm.Addbucket()'>Add bucket</button>
  <button ng-click='vm.DeleteLastBucket()'>Delete last bucket</button>
</div>

我可以分配多个$ watchCollection programmaticaly吗？

1 个答案: