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

I'm writing a simple AngularJS Controller that keeps track of the number of checkboxes checked. Trying to avoid $scope.$watch and instead use ng-change to increment/decrement the total count.

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

HTML:

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>

Controller snippet

控制器片段

$scope.updateTotal = function($event) {

    var checkbox = $event.target;

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

I keep getting an error in the controller where I attempt to access $event.target:

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

TypeError: Cannot read property 'target' of undefined

I created a Plunk for recreating: http://plnkr.co/edit/qPzETejmMHHZCQ2sV2Sk?p=info

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

If anyone has any ideas or suggestions I would be very grateful.

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

Thank you very much!

非常感谢你！

1 个解决方案

#1

ng-change function doesn't allow to pass $event as variable.

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

From an collaborator in AngularJS official github repo:

来自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不是处理更改事件的指令（我意识到这给名字带来了困惑），但实际上是在调用ngModelController时通知。$ setViewValue（）被调用并且值发生变化（因为ng-change添加了一个监听器到$ viewChangeListeners集合）。所以这是预期的。

You can read more about it ng-change doesn't get the $event argument

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

How can you solve your requirement?

你怎么解决你的要求？

Just pass item.selected to your ng-change function and check its value.

只需将item.selected传递给ng-change函数并检查其值。

HTML

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

Controller

调节器

$scope.updateTotal = function(item_selected) {

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

UPDATED

更新

You can test it here, in this plnkr

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

#1