Wie können Bootstrap-Spalten basierend auf einem Ereignis dynamisch geändert werden?

Question

Ich benutze angular-ui collapse, um 2 Spalten auszublenden und anzuzeigen. Wenn der Benutzer also auf glyphicon klickt, werden Spalten ausgeblendet/angezeigt. Wenn zwei Spalten zu dieser Zeit ausgeblendet sind, sollen 10 Spalten 12 Spalten sein. Ist es möglich, diese Aufgabe zu erfüllen?

main.html

<span class="glyphicon glyphicon-th-list" class="btn btn-default" ng-click="isCollapsed = !isCollapsed" id="treelist"></span> 
<div class="row"> 
    <div class="col-md-2" uib-collapse="isCollapsed"> 
     <p>test</p> 
     <p>test</p> 
    </div> 
    <div class="col-md-10"> 
    contains some data here ... 
    </div> 
</div> 

Answer 1

Sie sollten ng-class nutzen können zwischen den Klassen zu wechseln.

<div ng-class="{'col-md-12':isCollapsed,'col-md-10':!isCollapsed}"> 
    contains some data here ... 
</div>