javascript - AngularJS : hide <td> without gap using ng-hideng-show - Stack Overflow

admin管理员组

文章数量:1429327

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

Share Improve this question Follow edited Feb 6, 2016 at 21:30 marc_s 757k184184 gold badges1.4k1.4k silver badges1.5k1.5k bronze badges asked Feb 20, 2015 at 9:59 IggYIggY 3,14544 gold badges3232 silver badges5555 bronze badges 2

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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>

本文标签： javascriptAngularJShide lttdgt without gap using nghidengshowStack Overflow