ng-show和ng-hide有什么区别？

Question

These attributes are both given either a true or false value, so what difference is there between them? It would make sense if there weren't values for them.

Am I missing something?

Answer 1

With ng-show the element is shown if the expression is true , it will hide if it is false

On the other hand with ng-hide the element is hidden if the expression is true and it will be shown if it is false .

Just two sides of the same coin.

Answer 2

On a project I was working on before, I found having the option of both ng-show and ng-hide useful. The reason being is because I had a link in my navbar that was only supposed to show if the user was on a specific view. Here is that scenario:

<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>

Now, you might say, well you could just make the isActive('/about') || isActive('/contact') isActive('/about') || isActive('/contact') return the opposite Boolean and change the ng-hide to ng-show and every thing will stay the same but as you can see I'm also using this function to determine which link I'm on. If I reverse this logic, it will look like I'm on every link except the actual link I'm on. Granted I could write another function for the ng-show but I like reusing code that's already there.

Answer 3

值得一提的是ng-if ，它像ng-show和ng-hide一样接受布尔表达式，但不仅仅是根据表达式显示/隐藏元素，如果表达式为false并从DOM中完全删除了元素，如果表达式为true则元素返回DOM

Answer 4

i have a good scenario, let say you want to show one attribute or another depending on a validation, but not both, so using both ng-show and ng-hide like this:

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

if the validation is true it would show the first div, but if it is false it would show the second div... this can be done in many more ways but is a cleaver solution for a tricky problem :D

Answer 5

ng-show will only display the element IF the expression is true...

<span ng-show="true">Will Show </span>
<span ng-show="false">Will not Show </span>

ng-hide will not display the element IF the expression is true, but will display if the expression is false.

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