AngularJS checkbox ng-change issue with $ event.target

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 репо:

нг-изменения не директива для обработки события изменения (я понимаю , что это сбивает с толком дано название), но на самом деле вместо уведомления когда 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