$event.target 的 AngularJS 复选框 ng-change 问题

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>

控制器 sn-p

$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 repo 中的合作者：

ng-change 不是处理更改事件的指令（我意识到 鉴于名称，这令人困惑），但实际上是 当调用 ngModelController.$setViewValue() 并且 值更改（因为 ng-change 添加了一个监听器到 $viewChangeListeners 集合）。所以这符合预期。

您可以阅读更多关于它的信息ng-change doesn't get the $event argument

您如何解决您的需求？

只需将 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