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一样使用。

Answer 2

使用“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>

AngularJS：使用ng-hide / ng-show隐藏无间隙

2 个答案: