javascript - Angular : hide without gap using ng-hide/ng-show

Question

我有这样的代码:

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

td1 被正确隐藏，但是当 td2 被隐藏时，它会产生一个空隙。我希望 td2 完全被 td3 取代。

只使用 AngularJS 而不是 jQuery 会很酷。

Answer 1

您应该使用 ng-if 而不是 ng-hide。 ng-if 实际上会从 DOM 中删除元素。

ng-show/ng-hide 只是更改元素的 display css 属性。

例如:

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

参见 documentation如果您使用动画并希望它们像 ng-show/ng-hide 一样工作。