I have a model that renders a list of checkboxes. When I check one box I would like any other checked boxes to bee 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 monOrders">
                            <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 mon orders
    angular.forEach($scopemonOrders, function(value, key) {
        if (value.ProductItemCode !== product.ProductItemCode) {
            value.IsChecked = false;
        }
    }, $scopemonOrders);



};

I have a model that renders a list of checkboxes. When I check one box I would like any other checked boxes to bee 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 monOrders">
                            <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 mon orders
    angular.forEach($scope.monOrders, function(value, key) {
        if (value.ProductItemCode !== product.ProductItemCode) {
            value.IsChecked = false;
        }
    }, $scope.monOrders);



};

• javascript
• html
• angularjs
• angularjs-scope

• 3 Can you just use radio buttons? – bencripps Commented Aug 24, 2014 at 20:31
• can you post a Plunkr/JsFiddle ? :) – meriadec Commented Aug 24, 2014 at 20:36

1 Answer 1

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 monOrders">
   <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.monOrders, function(product) {
    if(product !== current) {
      product.isChecked = false;  
    }
  });
};