javascript - Angular ng-if 和改变 Twitter Bootstrap col-sm

Question

好的，这是代码: 左 block 右方 block

如果屏幕较小或较宽，它会在屏幕左侧显示左 block ，在屏幕右侧显示右 block 。对于比小屏幕小的屏幕(如两个简单的潜水)，它在左 block 下方显示右 block 。这很清楚。

我想对右边的 block 使用 ng-if="boolValue"，这样当它被隐藏时，左边的 block 就在屏幕中间，而不是左边。

最好的方法是什么？

<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-if 这样的东西:

<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>