使用AngularJS动态更改Bootstrap 3列宽？

Question

如何使用AngularJS切换Bootstrap 3网格系统列宽(col-*)？我正在尝试使用如下所示的ng-class,但它不起作用.任何帮助将不胜感激.

这是我视图中的网格结构:

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

这是我的控制器中的变量:

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

无论我设置范围变量是什么,列都只是堆叠,好像我在移动设备上一样.

Answer 1

应该是这样的,

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