What is the difference between `ng-show` and` ng-hide`?

Question

These attributes are given either as true or false , so what's the difference between them? It would be wise if there were no meanings for them.

Did I miss something?

Answer 1

In the project that I worked on earlier, I found the opportunity to use both ng-show and ng-hide . The reason is that I had a link in my navigation bar, which should only be displayed if the user was on a specific view. Here is the 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 can say that you could just force isActive('/about') || isActive('/contact') isActive('/about') || isActive('/contact') return the Boolean value back and change ng-hide to ng-show , and every thing will remain the same, but as you can see, I also use this to determine which link I am connecting to. If I change this logic, it will look as if I am on every link, except for the actual link that I am on. Of course, I could write another function for ng-show , but I like reusing code that already exists.

Answer 2

With ng-show element is displayed if the expression is true , it will be hidden if it is false

With ng-hide , on the other hand, the element is hidden if the expression is true , and it will be shown if it is false .

Only two sides of the same coin.

Answer 3

It is also worth mentioning ng-if , which takes a boolean expression just like ng-show and ng-hide , but instead of just showing / hiding the elements depending on the expression, it completely removes the element from the DOM if the expression is false and return element in the DOM if the expression becomes true

Answer 4

I have a good script, let's say you want to show one or more attributes depending on the check, but not both, so use ng-show and ng-hide as follows:

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

if the check is correct, it will display the first div, but if it is false, it will display the second div ... this can be done in many other ways, but this is a solution for a difficult task: D

Answer 5

ng-show will only display the IF 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 IF 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>