Detailed explanation of how to use ngShow and ngHide in AngularJS_AngularJS

Today we’ll take a look at how to use Angular’s ​​ngShow and ngHide directives to do what they sound like they should be done, show and hide!
What they should do

ngShow and ngHide allow us to show or hide different elements. This helps when creating Angular applications because our single-page applications will have many moving parts that come and go as the application state changes.

The great part about these directives is that we don’t have to use CSS or JS to show or hide them. These are all done by experienced Angular.

Usage

To use ngShow or ngHide, just add the directive to the element you want to show or hide.

<!-- FOR BOOLEAN VALUES =============================== -->
<!-- for true values -->
<div ng-show="hello">this is a welcome message</div>  
 
 <!-- can also show if a value is false --> 
<div ng-show="!hello">this is a goodbye message</div>  
 
<!-- FOR EXPRESSIONS =============================== -->
<!-- show if the appState variable is a string of goodbye -->
<div ng-show="appState == 'goodbye'">this is a goodbye message</div> 
 
<!-- FOR FUNCTIONS =============================== -->
<!-- use a function defined in your controller to evaluate if true or false -->
<div ng-hide="checkSomething()"></div>

Once we have set up our markup, we can set hello or goodbye in a variety of ways. You can set this in your Angular controller and have your div show or hide when the app loads.

The above can be used for ng-show or ng-hide. If a value or expression or function returns true, something is hidden.

is used as a Boolean value

We will create the link using ng-click and toggle the value of goCats to true or false.

<a href ng-click="goCats = !goCats">Toggle Cats</a>

Then we can use ng-show to show or hide the category images.

 
<img ng-src="http://i.imgur.com/vkW3Lhe.jpg" ng-show="goCats">

ng-src We use ng-src to call the image, so Angular will confirm whether to hide it when instantiating and checking the image. If we don't do this, the image will pop up as the site loads until Angular realizes it should be hidden.

Judgment expression

Here we judge a string passed from the input box. We bind ng-mode to an input box and name it the amino variable, and display different pictures based on the content of this variable.

Next we will call our variable name aminoal.

<input type="text" ng-model="aminal">

Then we will use ng-show to judge the string.

<img ng-src="http://i.imgur.com/vkW3Lhe.jpg" ng-show="aminal == 'cat'">

How to use

We will do a simple check to determine whether the input is an odd or even number. We will create a method in our AngularJS file:

// set the default value of our number
$scope.myNumber = 0;
   
// function to evaluate if a number is even
$scope.isEven = function(value) {
 
if (value % 2 == 0)
 return true;
else 
 return false;
 
};

After the method is created, the next thing we have to do is to use it through ng-show or ng-hide and pass in our numbers. Passing numbers through methods keeps Angular controls clean and testable.

<!-- show if our function evaluates to false -->
<div ng-show="isEven(myNumber)">
  <h2>The number is even.</h2>
</div>
  
<!-- show if our function evaluates to false -->
<div ng-show="!isEven(myNumber)">
  <h2>The number is odd.</h2>
</div>

Conclusion

With the guidance of these two directions, our application will be greatly improved. These are only elements showing and hiding functions based on Boolean values, expressions, and functions, but these three modes will be applicable to more scenes.