Examples are given to illustrate the usage of ngShow and ngHide in AngularJS

Today we'll look at how to use Angular's ngShow and ngHide directives to do what they sound like, show and hide!
What they're supposed to do

ngShow and ngHide allow us to show or hide different elements. This helps when creating Angular applications because our single page application has a lot of moving parts coming and going as the application state changes.

The greatest part of these instructions is that we don't have to use CSS or JS to manipulate display or hide. This was done by the veteran Angular.

usage

To use ngShow or ngHide, simply add the instruction 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 set our tag, we can set hello or goodbye in many ways. You can set it to your Angular controller and have your div show or hide when your application loads.

All of the above can be used for ES32en-ES33en or ES34en-ES35en. If the value or expression or function returns true, something is hidden.

Used as a Boolean value

We will create links that use ES41en-ES42en and toggle the value of goCats to true or false.

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

We can then use ES49en-ES50en to show or hide the classified images.

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

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

Judgment expression

Here we judge a string from an input field. We bind ES65en-ES66en to an input field and name it aminal variable, and display different images according to the content of this variable.

We're going to call our variable name aminal.

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

Then we'll use ES76en-ES77en to judge the string.

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

Method of use

We're going to do a simple check to see if it's odd or even. We will create 1 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;
 
};

Once the method is created, the next thing we do is use it via ES91en-ES92en or ES93en-ES94en and pass in our number. By passing Numbers through methods, Angular controls are kept 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 these two directions, our application will be greatly improved. These are only based on Boolean values, expressions, and functions, and implemented elements show and hide functions, but these three patterns will be applied to more scenarios.