CODEWITHSUNDEEP
javascriptangularjscheckbox
iamsar
iamsar

Reputation: 1130

Change checkbox state based on multiple conditions in AngularJS

In my scenario I have a select dropdown with an ng-model assigned to it. Each item in the dropdown corresponds to a number of checkboxes that are checked when a selection is made. The difficulty is that I can't just check for a simple key:value because checkboxes aren't exclusive to any particular selection. For example:

<select>
  <option>Dog</option>
  <option>Cat</option>
  <option>Bird</option>
</select>

<input type="checkbox">Is an animal
<input type="checkbox">Can bark
<input type="checkbox">Can meow
<input type="checkbox">Can tweet
<input type="checkbox">Has four legs
<input type="checkbox">Has wings

So as you can, the checkboxes for "Is an animal" and "Has four legs" aren't exclusive. My current implementation uses a simple conditional expression to evaluate whether or not the checkbox is marked (ng-checked="animal=='dog'") but of course this excludes the other two possibilities. So I'm wondering if there's a native Angular way to handle OR statements or an array. Or if not, how can I go about this with JavaScript or jQuery?

Upvotes: 1

Views: 1670

Answers (1)

Nikos Paraskevopoulos
Nikos Paraskevopoulos

Reputation: 40296

See this fiddle: http://jsfiddle.net/QHza7/

Template:

<div ng-app ng-controller="Test">
    <select ng-model="opts" ng-options="a.opts as a.name for a in answers"></select>
    <br/>
    <input type="checkbox" ng-model="opts.animal" />Is an animal<br/>
    <input type="checkbox" ng-model="opts.bark" />Can bark<br/>
    <input type="checkbox" ng-model="opts.meow" />Can meow<br/>
    <input type="checkbox" ng-model="opts.tweet" />Can tweet<br/>
    <input type="checkbox" ng-model="opts.legs4" />Has four legs<br/>
    <input type="checkbox" ng-model="opts.wings" />Has wings<br/>
</div>

Code:

function Test($scope) {
    $scope.answers = [
        {name:"Dog", opts:{animal:true,bark:true,legs4:true}},
        {name:"Cat", opts:{animal:true,meow:true,legs4:true}},
        {name:"Bird", opts:{animal:true,tweet:true,wings:true}}
    ];
    $scope.opts = null;
}

Upvotes: 4

Related Questions