I have code looking like this :

<table>
  <tr>
      <td>Hello</td>                 <!-- td1 -->
      <td ng-show="var">how are</td> <!-- td2 -->
      <td ng-hide="var">you</td>     <!-- td3 -->
  </tr>
</table>

The td1 is correctly hidden, but when td2 is hidden it create an empty gap. I'd like td2 to be fully replaced by td3.

Using only AngularJS and not jQuery would be cool.

I have code looking like this :

<table>
  <tr>
      <td>Hello</td>                 <!-- td1 -->
      <td ng-show="var">how are</td> <!-- td2 -->
      <td ng-hide="var">you</td>     <!-- td3 -->
  </tr>
</table>

The td1 is correctly hidden, but when td2 is hidden it create an empty gap. I'd like td2 to be fully replaced by td3.

Using only AngularJS and not jQuery would be cool.

• javascript
• angularjs

• can you explain what you mean by empty gap ? i can not reproduce it plnkr.co/edit/Dbw7VGmQu8s75cGEmhrG?p=preview – micha Commented Feb 20, 2015 at 10:20
• ng-hide set css to display:none. so there should be no gap. it is not set to visibility: hidden. So your gap has a other reason. please provide your real code – micha Commented Feb 20, 2015 at 10:31

2 Answers 2

You should use ng-if instead of ng-hide. ng-if will actually remove the element from the DOM.

ng-show/ng-hide simply changes the display css property of your element.

For example:

<table>
  <tr>
      <td>Hello</td>               <!-- td1 -->
      <td ng-if="var">how are</td> <!-- td2 -->
      <td ng-if="!var">you</td>    <!-- td3 -->
  </tr>
</table>

See the documentation if you use animations and want them to work like with ng-show/ng-hide.

Use "ng-if" instead of "ng-show". For example:-

<table>
  <tr>
      <td>Hello</td>                       <!-- td1 -->
      <td ng-if="var==true">how are</td>   <!-- td2 -->
      <td ng-hide="var==false">you</td>    <!-- td3 -->
  </tr>
</table>