我有这样的代码:
<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
只需更改元素的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>
如果您使用动画并希望它们像使用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>