CODEWITHSUNDEEP
javascriptangularjscheckbox
billy_comic
billy_comic

Reputation: 899

How To Uncheck Default Checkbox When Another Is Checked - Angular

I need to have the first value "none" checked as default and then unchecked when any of the other options are checked. I have found the way to do this using the ng-model but I'm using ng-model to build an object for email. Is there a way that I can do this using an angularish style?

<div class="activate-mail-subsection">
         <label>Allergies</label><br>
         <div class="checkbox mailorder-checkbox">
            <input name="allergies" class="checkbox"  type="checkbox" ng-model="mailorder.allergies.none" tabindex="1"/> None
        </div>
         <div class="checkbox mailorder-checkbox">
             <input name="allergies" class="checkbox"  type="checkbox" ng-model="mailorder.allergies.codeine" tabindex="1"/> Codeine
         </div>
         <div class="checkbox mailorder-checkbox">
             <input name="allergies" class="checkbox"  type="checkbox" ng-model="mailorder.allergies.sulfa" tabindex="1"/> Sulfa
         </div>
         <div class="checkbox mailorder-checkbox">
             <input name="allergies" class="checkbox"  type="checkbox" ng-model="mailorder.allergies.asprin" tabindex="1"/> Asprin
         </div>
         <div class="checkbox mailorder-checkbox">
             <input name="allergies" class="checkbox"  type="checkbox" ng-model="mailorder.allergies.penicillin" tabindex="1"/> Penicillin
         </div>
            <div class="checkbox mailorder-checkbox">
                <label>Other</label>
                <input name="allergies" class="form-control health-profile-text" type="text" ng-model="mailorder.allergies.other" tabindex="1"/>
            </div>
        </div>

Here is the object

  $scope.mailorder = {
    allergies: {none: true, codeine: false, sulfa: false, aspirin: false, penicillin: false, other: ''},
};

Upvotes: 0

Views: 1793

Answers (2)

Jodevan
Jodevan

Reputation: 750

You can keep using the ng-models to handle their status. This is actually a good idea. "none" will be set if any other value is set to true. With that in mind, you can just add a ng-click to any of your control forms in order to update the none status. If you want, you can also add another function to set all other controls to false upon checking the "none" box, too. 

<div class="activate-mail-subsection">
    <label>Allergies</label>
    <br />
    <div class="checkbox mailorder-checkbox">
        <input type="checkbox" name="allergies" class="checkbox" ng-model="mailorder.allergies.none" tabindex="1" ng-click="setNone()" />None
    </div>
    <div class="checkbox mailorder-checkbox">
        <input type="checkbox" name="allergies" class="checkbox" ng-model="mailorder.allergies.codeine" tabindex="1" ng-click="update()" />Codeine
    </div>
    <div class="checkbox mailorder-checkbox">
        <input type="checkbox" name="allergies" class="checkbox" ng-model="mailorder.allergies.sulfa" tabindex="1" ng-click="update()" />Sulfa
    </div>
    <div class="checkbox mailorder-checkbox">
        <input type="checkbox" name="allergies" class="checkbox" ng-model="mailorder.allergies.asprin" tabindex="1" ng-click="update()" />Asprin
    </div>
    <div class="checkbox mailorder-checkbox">
        <input type="checkbox" name="allergies" class="checkbox" ng-model="mailorder.allergies.penicillin" tabindex="1" ng-click="update()" />Penicillin
    </div>
    <div class="checkbox mailorder-checkbox">
        <label>Other</label>
        <input type="text" name="allergies" class="form-control health-profile-text" ng-model="mailorder.allergies.other" tabindex="1" ng-change="update()" />
    </div>
</div>

(Notice the updateNone() and update() hooks in the HTML code).

angular.module("app", []).controller('Ctrl',
    function($scope) {
        $scope.mailorder = {
            allergies: {
                none: true,
                codeine: false,
                sulfa: false,
                aspirin: false,
                penicillin: false,
                other: ''
            }
        };

        $scope.setNone = function() {
            $scope.mailorder.allergies.none = true;
            // Iterate over all mailorder elements
            for (var i in $scope.mailorder.allergies) {
                if (i === 'none') {
                    continue;
                }
                $scope.mailorder.allergies[i] = null;
            }
        }

        $scope.update = function() {
            for (var i in $scope.mailorder.allergies) {
                if (i === 'none') {
                    continue;
                }
                if ($scope.mailorder.allergies[i]) {
                    $scope.mailorder.allergies.none = false;
                    return;
                }
            }
            $scope.mailorder.allergies.none = true;
        };
    }
);

Here's an example in Plunker: http://plnkr.co/edit/b0JtSA7wI2XHd7KriSDp?p=preview

Upvotes: 2

Simon H
Simon H

Reputation: 21037

How about just making the none one a function of all the other responses?

 <input name="allergies" class="checkbox"  
        type="checkbox" 
        ng-checked="!mailorder.allergies.codeine && !mailorder.allergies.sulfa &!...."

If your list of alternatives gets longer, you could shift this to a function in your controller. In ES6 this can be done quite succinctly

$scope.isNone = function() {    
   return Object.values($scope.mailorder).every(r => !r)
}

Upvotes: 0

Related Questions