Disable check-boxes using a function with AngularJS

Question

I have a question about how to uncheck check-boxes inside ng-repeat, when the ng-model is already in use?

This is the construction:

The object:

$scope.wines = [

    { "name": "Wine a", "type": "white", "country": "italie", "style": "medium" },
    { "name": "Wine a", "type": "white", "country": "france", "style": "light" },
    { "name": "Wine a", "type": "white", "country": "france", "style": "sweet" }
  ];
  $scope.winetypes = {white : true, red: true};
  $scope.whitetypes = {light : false,medium : false,sweet : false};

});

HTML

    <li ng-repeat="(type, value) in winetypes">
      <input type="checkbox" ng-model="winetypes[type]" /> {{type}}
    </li>


   <li ng-repeat="(style, value) in whitetypes">
      <input type="checkbox" ng-model="whitetypes[style]" /> {{style}}
    </li>

    <ul>
      <li ng-repeat="wine in wines | winetypefilter:winetypes |whitefilter:whitetypes">
        {{wine.name}} is a {{wine.type}} with {{wine.style}} style from {{wine.country}}
      </li>
    </ul>

• My wish: the check-boxes linked to the whitetypes (light, medium, sweet) would be automatically unchecked, when the white check-box would be unchecked. I guess ng-model can't be used to achieve my wishes, because it's already in use.

I tried without success:

$scope.white= function() {
  if($scope.winetypes.white = false) {
    return $scope.whitetypes = {light: false, medium: false, sweet: false}
};

$scope.white;

The demo: http://plnkr.co/edit/nIQ2lkiJJY9MwJKHrqOk?p=preview

Answer 1

first decide what action you want...

• You want to change a checkbox model and it's value should effect other checkbox values...

so first solutions that come to my minds are...

• ng-change (because your wish is about changing a checkbox attribute)
• ng-click (for changing checkbox attribute you should click that input)
• ng-checked (set condition to be checked or unchecked)

ok let's move on our solution... After analysing these three (there can be more solutions) ng-change is best for this scenario because it guarantees that binded fucntion will be execute after user changed value of checkbox... for more details check official docs

first edit your html...

<li ng-repeat="(type, value) in winetypes">
  <input type="checkbox" ng-model="winetypes[type]" ng-change="disableRelatedStyles(type, winetypes[type])"/> {{type}}
</li>

and add our new function (disableRelatedStyles) to our controller...

  $scope.disableRelatedStyles = function (type, value) {
    if (type == 'white' && !value) {
      for(var style in $scope.whitetypes) {
         $scope.whitetypes[style] = false;
      }
    }
  };

and finally a working PLUNKER...

Answer 2

What you could do is use ng-click and $timeout to handle every click to the white checkbox.

$scope.click_handler = function (type) {
    if (type == 'white') {
        $timeout(function () {
            if ($scope.winetypes[type] === false) {
                $scope.wines.forEach(function (e) {
                    if (e.type == 'white') {
                        $scope.whitetypes[e.style] = false;
                    }
                })
            }
        })
    }
};

The $timeout is necessary since we want to wait for ng-model to update first. Make sure you are injecting $timeout into the controller.

in markup

<input type="checkbox" ng-click="click_handler(type)" ng-model="winetypes[type]" /> {{type}}

Here is a working Plunker