how to change div class with angular checkbox

Question

I cant seem to figure out how to change the class with a checkbox value. I can show/hide a class but I need a col-md-6 to change to a col-md-12. I have a map and a chart on the same row. I would like to be able to hide the map and make the chart the full width of the row. And vice versa

fiddle

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

 <div class="col-md-6" style="background-color:yellow">
     hide me if checkbox is true
</div>
<br/>
<div class="col-md-6" style="background-color:pink">

    change me to col-md-12 when checkbox is true
</div>

Donal · Accepted Answer · 2015-06-03 15:30:29Z

2

Use ng-class and ng-hide. Ng-hide will hide an element based on the value of check in your model. Ng-class will conditionally set a class based on a the value of check in your model.

For example:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
    <div >
        <input type="checkbox" ng-true-value="A" ng-false-value="B" ng-model="check"/>        
    </div>
    
     <div class="col-md-6" ng-hide="check === 'A'" style="background-color:yellow">
         hide me if checkbox is true
    </div>
    <br/>
    
    <div ng-class="{'col-md-12': check === 'A', 'col-md-6': check === 'B'}" style="background-color:pink">
        change me to col-md-12 when checkbox is true
    </div>  
</div>

Working fiddle: http://jsfiddle.net/wdtk370z/2/

edited Jun 3, 2015 at 15:30

answered Jun 3, 2015 at 15:15

Donal

33.2k10 gold badges69 silver badges75 bronze badges

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

Comments

Devjit · Accepted Answer · 2015-06-03 15:36:58Z

1

You can do like this.

<div ng-app>
<div >
    <input type="checkbox" ng-true-value="A" ng-false-value="B" ng-model="check"/>        
</div>
 <div class="col-md-6" ng-show="check=='B'" style="background-color:yellow">
     hide me if checkbox is true
</div>
<br/>
<div ng-class="check=='B'?'col-md-12':'col-md-6'" style="background-color:pink">

    change me to col-md-12 when checkbox is true
</div>

check this fiddle..http://jsfiddle.net/devjit/wdtk370z/3/

answered Jun 3, 2015 at 15:36

Devjit

3751 silver badge10 bronze badges

Collectives™ on Stack Overflow

how to change div class with angular checkbox

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related