如何使用角度复选框更改 div 类答案

【问题标题】：how to change div class with angular checkbox如何使用角度复选框更改 div 类
【发布时间】：2015-06-03 23:36:58
【问题描述】：

我似乎无法弄清楚如何使用复选框值更改类。我可以显示/隐藏一个类，但我需要一个 col-md-6 才能更改为 col-md-12。我在同一行上有一张地图和一张图表。我希望能够隐藏地图并使图表成为行的全宽。反之亦然

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

【问题讨论】：

标签： html css angularjs twitter-bootstrap-3

【解决方案1】：

使用ng-class 和ng-hide。 Ng-hide 将根据模型中的 check 值隐藏元素。 Ng-class 将根据模型中的 check 值有条件地设置一个类。

例如：

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

工作小提琴：http://jsfiddle.net/wdtk370z/2/

【讨论】：

【解决方案2】：

你可以这样做。

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

检查这个小提琴..http://jsfiddle.net/devjit/wdtk370z/3/

【讨论】：