Question

6

AngularJS checkbox ng-change issue with $event.target

rated 0 times [ 10] [ 4] / answers: 1 / hits: 32674 / 9 Years ago, tue, march 17, 2015, 12:00:00

I'm writing a simple AngularJS Controller that keeps track of the number of checkboxes checked. Trying to avoid $scope.$watch and instead use ng-change to increment/decrement the total count.

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>

Controller snippet

$scope.updateTotal = function($event) {



    var checkbox = $event.target;



    if (checkbox.checked) {

      $scope.totalSelected++;

    }

    else {

      $scope.totalSelected--;

    } 

}

I keep getting an error in the controller where I attempt to access $event.target:

TypeError: Cannot read property 'target' of undefined

I created a Plunk for recreating: http://plnkr.co/edit/qPzETejmMHHZCQ2sV2Sk?p=info

If anyone has any ideas or suggestions I would be very grateful.

Thank you very much!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

deannaalysonl

Add To Favorites

Follow

Total Points: 703

Total Questions: 101

Total Answers: 115

Location: Saint Helena

Member since Tue, Nov 3, 2020

4 Years ago

answered 9 Years ago kieraelsies · Accepted Answer

ng-change function doesn't allow to pass $event as variable.

From an collaborator in AngularJS official github repo:

ng-change is not a directive for handling the change event (I realize
that this is confusing given the name), but is actually instead
notified when ngModelController.$setViewValue() is called and the
value changes (because ng-change adds a listener to the
$viewChangeListeners collection). So this is as expected.

You can read more about it ng-change doesn't get the $event argument

How can you solve your requirement?

Just pass item.selected to your ng-change function and check its value.

HTML

  <input type=checkbox 

         value={{item.id}}

         ng-model=item.selected

         ng-change=updateTotal(item.selected)> &nbsp; {{item.name}}

Controller

$scope.updateTotal = function(item_selected) {



    if (item_selected) {

      $scope.totalSelected++;

    }

    else {

      $scope.totalSelected--;

    } 

}

UPDATED

You can test it here, in this plnkr