1. 首页
  2. 问题
  3. 带有$ event.target的AngularJS复选框ng-change问​​题
一尘不染

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

angularjs

我正在编写一个简单的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

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

非常感谢你！


阅读 221

收藏
2020-07-04

共1个答案

一尘不染

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

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

ng-change不是用于处理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中对其进行测试

2020-07-04