web-dev-qa-db-fra.com

AngularJS checkbox ng-change issue with $ event.target

J'écris un simple contrôleur AngularJS qui garde une trace du nombre de cases à cocher cochées. Essayer d'éviter $scope.$watch et utilisez plutôt ng-change pour augmenter/diminuer le nombre total.

[~ # ~] 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>

Extrait de contrôleur 

$scope.updateTotal = function($event) {

    var checkbox = $event.target;

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

Je reçois toujours une erreur dans le contrôleur où j'essaie d'accéder à $event.target:

TypeError: Cannot read property 'target' of undefined

J'ai créé un Plunk pour recréer: http://plnkr.co/edit/qPzETejmMHHZCQ2sV2Sk?p=info

Si quelqu'un a des idées ou des suggestions, je lui en serais très reconnaissant.

Merci beaucoup!

javascriptangularjscheckbox
14
Philip Tenn

ng-change la fonction ne permet pas de passer $event comme variable.

D'un collaborateur au repo officiel d'AngularJS:

ng-change n'est pas une directive pour gérer l'événement change (je me rends compte que cela prête à confusion étant donné le nom), mais est en fait notifié à la place lorsque ngModelController. $ setViewValue () est appelé et la valeur change (car ng-change ajoute un écouteur à la collection $ viewChangeListeners). C'est donc comme prévu.

Vous pouvez en savoir plus ng-change ne reçoit pas l'argument $ event

Comment pouvez-vous résoudre votre besoin?

Passez juste item.selected à votre fonction ng-change et vérifiez sa valeur.

HTML

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

Manette

$scope.updateTotal = function(item_selected) {

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

[~ # ~] mis à jour [~ # ~]

Vous pouvez le tester ici, dans ce plnkr

45
levi