Binding checkbox to model and check/unchecking it in Angular

Question

I have a the following HTML:

<li ng-repeat="test in lists.Tests">
    <label>
        <input type="checkbox" id="cbxAcceptTest" ng-checked="{{test.IsAccepted}}"  ng-click="testSelection($event,{{test}})" />
    </label>
</li>

and the testSelection method as :

$scope.testSelection = function ($event, test) {
    if (test.IsAccepted) {
        alert('accept');
    }
    else {
        alert('reject');
    }

};

I am not able to trigger this method on ngClick, It works on ngChecked, but then I have to use ngModel, which Ive read does not go with ngChecked in the following link.

ng-click="testSelection()" this will call your method which is in controller — newstackoverflowuser5555, Jun 11 '15 at 06:03
I need to send parameters to the method as well to update the model — SJMan, Jun 11 '15 at 06:05

score 1 · Accepted Answer · answered Jun 11 '15 at 06:09

In my case I have something like this:

<li ng-repeat="item in items">
    <label>
        <input type="checkbox" ng-model="item.auto" ng-click="onAutoClick(item)" />
    </label>
</li>

In my controller:

$scope.onAutoClick = function(item) {
  if(item.auto){
     // checked (true condition)
  } else  {
     // unchecked ( false condition)
  }

};

score 1 · Answer 2 · answered Jun 11 '15 at 06:12

1

Just remove the curly braces around test when you pass it as a parameter.

answered Jun 11 '15 at 06:12

cloudberry

379
3
10

newstackoverflowuser5555 · Answer 3 · 2015-06-11T07:08:54.837

1

Please check this Plnkr.

In HTML you need remove your curly braces

  <li ng-repeat="test in lists.Tests">
    <label>
        <input type="checkbox" id="cbxAcceptTest" ng-checked="{{test.IsAccepted}}"  ng-click="testSelection(test)" />
    </label>

edited Jun 11 '15 at 07:08

answered Jun 11 '15 at 06:14

newstackoverflowuser5555

741
2
11
31

Binding checkbox to model and check/unchecking it in Angular

3 Answers3