Twitter Bootstrap Question posted in

Angular ng-if and changing Twitter Bootstrap col-sm

OK, here is the code:

left block

right block

It shows left block on the left part of screen and right block on the right of screen, if a screen is small or wider. And it shows right block under the left block for screens that are smaller than small (as two simple dives). That’s clear.

I would like to use ng-if=”boolValue” for the right block so that when it is hidden, then the left block is in the middle of the screen, not on the left.

What’s the best way to do it?

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

What’s the technique to make it done? The best thing that comes to my mind is to use ng-if something like this:

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

but I don’t think that’s the proper and the best way.

Tags:

2

Answers


  1. 0 
     <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>
    Login or Signup to reply.
  2. 0 
    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search