Question

是否可以使用bootstrap根据复选框值设置列的大小？例如：

//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">

可以在下面找到可能的解决方案。但这是多余的。使用bootstrap方法完成它应该是更好的方法。把它放在

形式会很好

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

冗余解决方案：

<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>

Answer 1

试试这个：

<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>

列大小取决于复选框值

1 个答案: