CODEWITHSUNDEEP
htmlangularjstwitter-bootstrap
burseaner
burseaner

Reputation: 905

Column size depending on checkbox value

Is it possible with bootstrap to set the size of the column based on check box value? For instance:

//check box has value true than 
<div class="col-lg-12 col-md-12 col-sm-12">    

//for value false
<div class="col-lg-6 col-md-6 col-sm-6">

A possible solution can be found below. But it is redundant. It should be a better way to accomplish it with bootstrap means. It would be nice to have it in the form

<div class="checkbox.value ? col-lg-6 : col-lg-12"> orderdetails </div>

The redundant solution:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app >    
    <div class="row container" style="margin:10px">
        
        <input type="checkbox" name="BillingAddress" ng-model="ModelData.BillingAddress"> Please, separate billing address </input>
        
        <!-- shipping address -->
        <div class="col-lg-6 col-md-6 col-sm-6">
            <img src="http://placehold.it/300x400/0000FF&text=shippingaddress" class="img-responsive"/>
        </div> 
        
         <!-- order details -->
        <!-- how to get rid off this repetition -->
        <div class="col-lg-6 col-md-6 col-sm-6" ng-show="!ModelData.BillingAddress">
            <img src="http://placehold.it/300x400/FF0000&text=orderdetails" class="img-responsive"/>
        </div>
        
        <!-- billing details -->
        <div class="col-lg-6 col-md-6 col-sm-6" ng-show="ModelData.BillingAddress">
            <img src="http://placehold.it/300x400/00FF00&text=billingaddress" class="img-responsive"/>
        </div>
        
        <!-- order details -->
        <div class="col-lg-12 col-md-12 col-sm-12" ng-show="ModelData.BillingAddress">
            <img src="http://placehold.it/600x400/FF0000&text=orderdetails" class="img-responsive"/>
        </div>
                        
    </div>
        
</div>

Upvotes: 0

Views: 67

Answers (1)

v1vendi
v1vendi

Reputation: 613

try this: 

<div ng-class="{
    'col-lg-12 col-sm-12 col-xs-12': checkbox.value, 
    'col-lg-6 col-sm-6 col-xs-6' : !checkbox.value}">
</div>

Upvotes: 1

Related Questions