AngularJS: Detecting which checkbox in an ngRepeat is checked/unchecked and calling a function

Question

I think I'm trying to do something relatively simple in Angular but for some reason I can't get my head perfectly around ngClick, ngModel, ngChange or ngChecked to solve it.

I have a whole bunch of repeated checkboxes and when one is checked, a function alerts one thing and when its unchecked, the function alerts a different thing. Here's some pseudo code:

HTML:

<div id="topic" ng-repeat="50 times">
    <input type='checkbox' ng-model='???' ng-click='myFunc($index)' />
</div>

Script:

function myFunc(index) {
    if (checkbox == checked) {
      alert('checkbox ' + index + 'checked!');
    }
    else {
      alert('checkbox' + index + 'unchecked!');
    }
}

So the problem is I can't figure out how to tell which checkbox in the repeat is checked and when it's unchecked. Anyone any ideas?

I can't really add a fiddle because I don't know how to do this properly. The fiddle would just be broken. Is something not clear? — aadu
– aadu, Commented Mar 11, 2014 at 10:19

Ed_ · Accepted Answer · 2014-03-11 10:27:57Z

5

You need the help of a controller..

I'd do something like this:

Initialise an empty array of values on the $scope and a function to use on change.

$scope.checkboxes = [];

$scope.alert = function(index, event){

  alert("checkbox " + index + " is " + $scope.checkbox[index]);

}

Bind ng-model to checkboxes[$index], then you can use ng-change because you have specified a model.

<input type="checkbox" 
       ng-model="checkbox[$index]" 
       ng-change="alert($index)">

See this plunker.

answered Mar 11, 2014 at 10:27

Ed_

19.2k8 gold badges48 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

onkar patil · Accepted Answer · 2014-08-28 13:42:38Z

0

Ng-model gets called after ng-click. so you can clear model on ng-click and its done. nd-model will bing the value after ng-click

Javascript Code:

 for (var i = 0; i < $scope.sunday_workshop.length; i++) {              
                $scope.sunday_workshop[i].flag = false;                 
            }

HTML Code:

 <div ng-repeat="workshop in sunday_workshop">
                        <input type="checkbox" name="sun_workshop" ng-checked="workshop.flag" ng-model="workshop.flag" ng-click="workshop_method('sunday')"> {{workshop.WS_Option}}

answered Aug 28, 2014 at 13:42

onkar patil

12 bronze badges

Collectives™ on Stack Overflow

AngularJS: Detecting which checkbox in an ngRepeat is checked/unchecked and calling a function

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related