CODEWITHSUNDEEP
angularjstwitter-bootstrap
Corey Quillen
Corey Quillen

Reputation: 1576

Change Bootstrap 3 column widths dynamically with AngularJS?

How can I toggle the Bootstrap 3 grid system column widths (col-*) using AngularJS? I am trying to use ng-class as shown below, but it is not working. Any help will be greatly appreciated.

Here is the grid structure in my view:

<div class="row">
  <div ng-class="{{columnWidth}}"></div>
  <div ng-class="{{columnWidth}}"></div>
  <div ng-class="{{columnWidth}}"></div>
</div>

Here is the variable in my controller:

$scope.columnWidth = "col-md-3"; //Toggle between "col-md-3" and "col-md-4"

The columns just stack as if I'm on a mobile device regardless of what I set the scope variable too.

Upvotes: 2

Views: 6147

Answers (1)

Jayantha Lal Sirisena
Jayantha Lal Sirisena

Reputation: 21366

Should be like this,

  <div ng-class="columnWidth"></div>

Upvotes: 9

Related Questions