how to show/hide a div on the basis of a checkbox selection in angular js

Question

I have a checkbox and a div on my page.

<input type="checkbox" id="Animals" name="Animals" ng-model="ModelData.Animals" 
                            ng-checked="ModelData.Animals == 'A'" />


 <div class="form-group" ng-show="ModelData.Animals == 'A'">

                        <label for="FirstName" class="col-md-9">
                            Are you interested in Animal Liability Coverage?
                        </label>
                        <div class="col-md-3">
                            <label>
                                <input type="radio" id="AnimalLiabCovY" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov"
                                    value="Y" />
                                Yes
                                <input type="radio" id="AnimalLiabCovN" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov"
                                    value="N" />
                                No
                            </label>
                        </div>
  </div>

I want to show the DIV when the checkbox is selected and hide when deselected. For the first time the above code workd fine ie when checkbox is selected and DIV hides on deselecting the checkbox. But after the first time its not working. It does not show the DIV after selecting the checkbox.

Baumannzone · Accepted Answer · 2015-12-14 17:14:16Z

26

Have you tried it this way? Here's the fiddle It works great.

<input type="checkbox" id="Animals" name="Animals" ng-model="ModelData.Animals" />
<div class="form-group" ng-show="ModelData.Animals">
  <label for="FirstName" class="col-md-9">
    Are you interested in Animal Liability Coverage?
  </label>
  <div class="col-md-3">
    <label>
      <input type="radio" id="AnimalLiabCovY" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov" value="Y" /> Yes
      <input type="radio" id="AnimalLiabCovN" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov" value="N" /> No
    </label>
  </div>
</div>

edited Dec 14, 2015 at 17:14

Baumannzone

7802 gold badges20 silver badges38 bronze badges

answered Feb 13, 2014 at 8:23

Tyler McGinnis

35.4k16 gold badges75 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sanjeev Singh Over a year ago

Thanks Tyler. I knew what I was missing.

Dieterg · Accepted Answer · 2014-02-13 08:30:43Z

11

I think you are looking for ng-true-value and ng-false-value

<div ng-app>
    <div >
        <input type="checkbox" ng-true-value="A" ng-false-value="B" ng-model="check"/>        
    </div>

    <div ng-show="check == 'A'">
        Checked
    </div>
</div>

Fiddle

answered Feb 13, 2014 at 8:30

Dieterg

16.4k3 gold badges34 silver badges50 bronze badges

Comments

Aakash Thakur · Accepted Answer · 2017-04-13 07:14:30Z

0

<body ng-app>
     <label>Wolf: <input type="checkbox" ng-model="Wolf" ng-init="checked=true" /></label><br/>
     <label>Tiger: <input type="checkbox" ng-model="Tiger" ng-init="checked=false" /></label><br/>
     <label>Lion: <input type="checkbox" ng-model="Lion" ng-init="checked=false" /></label><br/> 
     Show when checked:
     <div ng-if="Wolf">
     <span> This is removed when the wolf is checked.
     </span>
     </div>

<div ng-if="Tiger">
    <span> This is removed when the tiger is checked.
    </span>
</div>
<div ng-if="Lion">
    <span> This is removed when the lion is  checked.
    </span>
</div>
</body>

answered Apr 13, 2017 at 7:14

Aakash Thakur

1

Comments

Ajay · Accepted Answer · 2020-11-02 06:38:43Z

0

Input type checkbox return true false in ng-model so i just use this. Its working

   <div ng-app>
   <div >
      <input type="checkbox" ng-model="check"/>        
  </div>

  <div ng-show="check == true">
     Checked
  </div>

answered Nov 2, 2020 at 6:38

Ajay

1

Collectives™ on Stack Overflow

how to show/hide a div on the basis of a checkbox selection in angular js

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related