`ng-show`和`ng-hide`有什么区别?

时间:2015-05-13 18:18:02

标签: angularjs

这些属性都有truefalse值,那么它们之间有什么区别?如果它们没有价值,那将是有意义的。

我错过了什么吗?

5 个答案:

答案 0 :(得分:3)

如果表达式为 true ,则会显示action元素,如果 false

,它将隐藏

另一方面,<action name="hello_action"> <shell xmlns="uri:oozie:shell-action:0.1"> <job-tracker>${jobTracker}</job-tracker> <name-node>${nameNode}</name-node> <exec>/user/nz/printActionName.sh</exec> <argument><!-- PASS current action name i.e. hello_action --></argument> <file>/user/nz/printActionName.sh#printActionName.sh</file> <capture-output/> </shell> <ok to="end"/> <error to="fail"/> </action> 如果表达式为 true ,则隐藏该元素,如果 false 则会显示该元素。

同一枚硬币的两面。

答案 1 :(得分:3)

在我之前正在处理的项目中,我发现可以选择ng-showng-hide。原因是因为我的导航栏中有一个链接,该链接只显示用户是否在特定视图上。这是这种情况:

<li ng-hide="isActive('/about') || isActive('/contact')" ng-class="{ 'vert-nav-active': isActive('/investigator')}" class="top-buffer">
<a href="#/investigator" class="buff-sides navListLinks">Investigator Portal</a>
</li>

现在,您可能会说,您可以让isActive('/about') || isActive('/contact')返回相反的布尔值,并将ng-hide更改为ng-show,但每件事情都会保持不变,但您可以看到我也用这个函数来确定我在哪个链接。如果我颠倒这个逻辑,它看起来就像我在每个链接上,除了我所在的实际链接。虽然我可以ng-show编写另一个函数,但我喜欢重用已经存在的代码。

答案 2 :(得分:1)

另外值得一提的是ng-if,它采用类似ng-showng-hide的布尔表达式,而不是仅根据表达式显示/隐藏元素,它完全删除了元素表达式为false的DOM,如果表达式变为true

,则将元素放回DOM中

答案 3 :(得分:1)

我有一个很好的场景,假设您想显示一个或另一个属性,具体取决于验证,但不是两者都有,所以同时使用ng-show和ng-hide:

<div ng-show="validation"></div>
<div ng-hide="validation"></div>

如果验证为真,它将显示第一个div,但如果为false则显示第二个div ... 这可以通过更多方式完成,但却是解决棘手问题的切割工具:D

答案 4 :(得分:0)

ng-show只显示表达式为真的元素...

<span ng-show="true">Will Show </span>
<span ng-show="false">Will not Show </span>
如果表达式为真,

ng-hide将不显示该元素,但如果表达式为false,则显示该元素。

<span ng-hide="true">Will not display</span>
<span ng-hide="false">Will display</span>