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 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

进行测试

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

1 个答案: