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

do you also want that when you check white all white related attributes checked as well??? — Poyraz Yilmaz
– Poyraz Yilmaz, Commented Jun 14, 2014 at 5:58
the idea was only uncheck the related attributes, when the white checkbox is unchecked. Thanks again for your help :) — Stéphane
– Stéphane, Commented Jun 14, 2014 at 17:34

Poyraz Yilmaz · Accepted Answer · 2014-06-14 06:33:37Z

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...

Hi wickY26, thanks a lot for you help and explanation!! I understood very well how your function works! I didn't know the ng-change command, and how to use it. Really it's very powerful, it's nice the idea using !value to check if 'white' is false or not!! Thanks of your help, I understand better AngularJS! Regards, stéphane

XrXr · Accepted Answer · 2014-06-14 03:59:15Z

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

Hi XrXrXr, thanks a lot for your help!! $timeout was unknown for me, now I understood how it works!! Really, it help me too understand better AngularJS inside the context. Regards, Stéphane
btw $timeout is just Angular's wrapper of window.setTimeout, nothing special about it

Collectives™ on Stack Overflow

Disable check-boxes using a function with AngularJS

2 Answers 2

1 Comment

2 Comments

Hot Network Questions