hussain hussain - 1 month ago 16
AngularJS Question

How to change bootstrap columns dynamically based on event?

I am using angular-ui collapse to hide and show 2 columns so when user click on glyphicon it will hide/show columns, Now when two columns are hidden at that time i want 10 columns to be 12 columns. is it possible to achieve this task ?

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

You should be able to use ng-class to switch between classes.

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