【问题标题】:angularjs: $scope.$watch does not work inside forloopangularjs:$scope.$watch 在 for 循环中不起作用
【发布时间】:2016-03-14 14:58:31
【问题描述】:

$watch 下的日志对于 newV 和 OldV 都返回 undefined,但是在 watch 返回对象的正确属性之前的日志。我附上了显示数据结构的第一个日志的结果。我正在尝试向贡献者数组中的数量属性添加一个侦听器。

for(var j = 0; j < vm.project.localCosts.length; j++) {
              console.log( vm.project.localCosts[j]);
              for (var k=0; k < vm.project.localCosts[j].contributors.length; k++) {
                console.log(vm.project.localCosts[j].contributors[k]);
                $scope.$watch('vm.project.localCosts[j].contributors[k].amount',function(newV,OldV){
                  console.log(newV,OldV);
                })
              }
            }

【问题讨论】:

  • 这是 Angular 表达式宽容而不抛出异常的缺点。您没有连接 jk 的值。

标签: javascript angularjs for-loop


【解决方案1】:

替换

'vm.project.localCosts[j].contributors[k].amount' 

'vm.project.localCosts[' + j + '].contributors[' + k + '].amount'

但我认为您不应该生成这样的手表,因为它的开销很大。也许你可以告诉我们你真正想要完成什么

这很可能会更好

HTML

<div ng-app="demo">
  <table ng-controller="demoController">
    <tr ng-repeat="localCost in vm.project.localCosts">
      <td ng-repeat="contributor in localCost.contributors">
        <input ng-change="callback(localCost.contributors[$index], contributor, $index, $parent.$index)" type="text" ng-model="localCost.contributors[$index]" />
      </td>
    </tr>
  </table>
</div>

Javascript

var app = angular.module("demo", []);

app.controller("demoController", function($scope) {
  $scope.vm = {
    project: {
      localCosts: [{
        contributors: ["a", "b", "c"]
      }, {
        contributors: ["e", "f", "g"]
      }, {
        contributors: ["h", "i", "j"]
      }]
    }
  };

  $scope.callback = function(newValue, oldValue, i, j) {
    console.log(i, j, oldValue, newValue);
  };
});

这是一个代码笔,可以做你想做的事情

http://codepen.io/anon/pen/BKLEME?editors=1010

【讨论】:

  • 感谢 Logan 的快速回答,我想用 year(key) 和 amount(value) 存储一个对象,并且随着当年金额的变化,我想将该金额增加到相关年份。年份在 localcost 对象内。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2015-04-25
  • 1970-01-01
  • 2013-02-26
  • 1970-01-01
  • 2015-08-31
  • 2015-08-09
  • 2013-02-13
相关资源
最近更新 更多