Unchecking a checkbox with angularjs

Question

I have a model that renders a list of checkboxes. When I check one box I would like any other checked boxes to become unchecked. The below code seems to iterate fine, but the html is not reflecting the changes. What am I missing?

HTML:

<tr ng-repeat="x in commonOrders">
                            <td>{{x.ProductName}}</td>
                            <td>{{x.ProductItemCode}}</td>
                            <td>{{x.ProductSize}}</td>
                            <td><input type="checkbox" 
                                       ng-click="updateCommonProduct(x)" 
                                       ng-checked="x.IsChecked"/></td>
                        </tr>

angular/javascript:

$scope.updateCommonProduct = function(product) {

    // uncheck non-selected common orders
    angular.forEach($scope.commonOrders, function(value, key) {
        if (value.ProductItemCode !== product.ProductItemCode) {
            value.IsChecked = false;
        }
    }, $scope.commonOrders);



};

Can you just use radio buttons?

bencripps
– bencripps

2014-08-24 20:31:56 +00:00
Commented Aug 24, 2014 at 20:31 — bencripps
– bencripps, Commented Aug 24, 2014 at 20:31
can you post a Plunkr/JsFiddle ? :)

meriadec
– meriadec

2014-08-24 20:36:22 +00:00
Commented Aug 24, 2014 at 20:36 — meriadec
– meriadec, Commented Aug 24, 2014 at 20:36

Ilan Frumer · Accepted Answer · 2014-08-24 21:23:35Z

4

You should use `ngModel` & `ngChange`:

ngModel creates a two-way binding between the model and the DOM.
ngChange triggers an event when a model gets change.

Here is a plunker: http://plnkr.co/edit/lrQnA6JrvlsirqK8QGaE?p=preview

Template:

<tr ng-repeat="x in commonOrders">
   <td>{{x.ProductName}}</td>
   <td>{{x.ProductItemCode}}</td>
   <td>{{x.ProductSize}}</td>
   <td>
     <input type="checkbox" ng-change="check(x)" ng-model="x.isChecked"/>
   </td>
 </tr>

Controller method:

$scope.check = function(current) {
  angular.forEach($scope.commonOrders, function(product) {
    if(product !== current) {
      product.isChecked = false;  
    }
  });
};

answered Aug 24, 2014 at 21:23

Ilan Frumer

32.4k8 gold badges73 silver badges84 bronze badges

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

1 Comment

user1206480 Over a year ago

Thanks, worked perfectly. I don't know why this question got marked down. Mark downs with out explanation don't help me or anyone else with the same problem viewing this. For the record, I was able to leave my code exactly the same by replacing ng-click with ng-change and ng-checked with ng-model.

Collectives™ on Stack Overflow

Unchecking a checkbox with angularjs

1 Answer 1

You should use `ngModel` & `ngChange`:

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

You should use ngModel & ngChange:

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related

You should use `ngModel` & `ngChange`: