Angular ng-if和更改Twitter Bootstrap col-sm

Question

OK，這是代碼：左塊右塊

如果屏幕較小或較寬，則在屏幕左側顯示左塊，在屏幕右側顯示右塊。 對於小於大小的屏幕（兩次簡單潛水），它會在左側區域下方顯示右側區域。 很清楚

我想對右邊的塊使用ng-if =“ boolValue”，以便在隱藏時，左邊的塊在屏幕的中間，而不是在左邊。

最好的方法是什么？

<div class="row">
   <div class="col-sm-6">
      left block in the center
   </div>
   <div class="col-sm-6" ng-if="boolValue">
      when right block is hidden because of falsy boolValue
   </div>
</div>

完成這項工作的技術是什么？ 我想到的最好的方法是使用ng-如果是這樣的話：

<div class="row">
   <div class="col-sm-12" ng-if="!boolValue">
      left block in the center
   </div>
   <div class="col-sm-6" ng-if="boolValue">
      left block in the center <the same content as above>
   </div>
   <div class="col-sm-6" ng-if="boolValue">
      when right block is hidden because of falsy boolValue
   </div>
</div>

但我認為這不是正確的最佳方法。

Answer 1

<div class="row">
   <div ng-class="{'col-sm-12': !boolValue, 'col-sm-6': boolValue}" ng-if="!boolValue">
      left block in the center
   </div>
   <div class="col-sm-6" ng-if="boolValue">
      when right block is hidden because of falsy boolValue
   </div>
</div>

Answer 2

 <div class="row">    
   <div ng-class="{'col-sm-6':boolValue,'col-sm-12':!boolValue}">

   </div>
   <div class="col-sm-6" ng-if="boolValue">

   </div>
</div>