CODEWITHSUNDEEP
htmlcssangularjstwitter-bootstrap
hussain
hussain

Reputation: 7083

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>

Upvotes: 1

Views: 2042

Answers (2)

artonbej
artonbej

Reputation: 287

I am using this way in Angular

<div [ngClass]="{'col-md-12':!advancedSearch,'col-md-10':advancedSearch}"></div>

Upvotes: 0

captncraig
captncraig

Reputation: 23068

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>

Upvotes: 2

Related Questions