AngularJS:隐藏<td>使用ng-hide/ng-show没有间隙

AngularJS : hide <td> without gap using ng-hide/ng-show

本文关键字：ng-show 间隙 ng-hide gt 隐藏 lt td AngularJS 使用      更新时间：2024-02-01

我有这样的代码：

<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会很酷。

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

ng-show/ng-hide只需更改元素的displayCss属性。

例如：

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

如果您使用动画并希望它们像使用ng-show/ng-hide一样工作，请参阅文档。

使用"ng if"而不是"ng show"。例如：-

<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>
相关文章：