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

Question

我正在编写一个简单的 AngularJS 控制器，用于跟踪选中的复选框的数量。试图避免 $scope.$watch 而是使用 ng-change 到 increment/decrement 总数。

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 is not a directive for handling the change event (I realize that this is confusing given the name), but is actually instead notified when ngModelController.$setViewValue() is called and the value changes (because ng-change adds a listener to the $viewChangeListeners collection). So this is as expected.

您可以阅读更多相关信息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

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

AngularJS checkbox ng-change issue with $event.target

javascript

checkbox

angularjs