УгловойJS checkbox ng-change issue с ​​$ event.target

Я пишу простой контроллер 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

Если у кого-то есть какие-то идеи или предложения, я был бы очень благодарен.

Большое спасибо!

Ответы

Ответ 1

Функция

ng-change не позволяет передавать $event в качестве переменной.

От соавтора в официальном gythub repo от AngularJS:

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