使用$ event.target的AngularJS复选框更改问题

Question

我正在编写一个简单的AngularJS控制器来跟踪检查的复选框的数量.试图避免$scope.$watch使用ng-change增加/减少总计数.

HTML:

<form ng-controller="MainCtrl">
  <table>
    <tr ng-repeat="item in data">
      <td>
      <input type="checkbox" 
             value="{{item.id}}"
             ng-model="item.selected"
             ng-change="updateTotal($event)"> &nbsp; {{item.name}}
       </td>
    </tr>
  </table>
  <p>
      Total checked: {{totalSelected}}
   </p>
</form>

控制器片段

$scope.updateTotal = function($event) {

    var checkbox = $event.target;

    if (checkbox.checked) {
      $scope.totalSelected++;
    }
    else {
      $scope.totalSelected--;
    } 
}

我一直在尝试访问的控制器中收到错误$event.target:

TypeError: Cannot read property 'target' of undefined

我创建了一个用于重新创建的Plunk:http://plnkr.co/edit/qPzETejmMHHZCQ2sV2Sk？p = info

如果有人有任何想法或建议,我将非常感激.

非常感谢你!

Answer 1

ng-change函数不允许$event作为变量传递.

来自AngularJS官方github回购的合作者:

ng-change不是处理更改事件的指令(我意识到这在给定名称时会引起混淆),但实际上是在调用ngModelController时通知.$ setViewValue()被调用并且值发生变化(因为ng-change添加了一个监听器到$ viewChangeListeners集合).所以这是预期的.

你可以阅读更多关于它的信息,ng-change没有得到$ event参数

你怎么解决你的要求？

只需item.selected转到ng-change功能并检查其值.

HTML

  <input type="checkbox" 
         value="{{item.id}}"
         ng-model="item.selected"
         ng-change="updateTotal(item.selected)"> &nbsp; {{item.name}}

调节器

$scope.updateTotal = function(item_selected) {

    if (item_selected) {
      $scope.totalSelected++;
    }
    else {
      $scope.totalSelected--;
    } 
}

更新

你可以在这里用plnkr进行测试