Using ngShow and ngHide directives in AngularJS

Today we look at how you can use the ngShow and ngHide directives in Angularjs.

What are they needed for

ngShow and ngHide allow you to show or hide various elements. This helps in creating Angular applications, since our SPAs are likely to have many parts, which, depending on the state of our application, must be hidden or shown.

The big advantage of these directives is that we don’t need to hide or show elements using CSS or JavaScript. This all handles the good old Angular.
')

Using

To use ngShow or ngHide, you just need to add a directive to the element that 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> 

When the markup is created, you need to set the values ​​of the variables hello or goodbye . You can do this, for example, in the Angular controller and the corresponding div will be shown or hidden after downloading the application.

Use with Boolean Values

Demo
We will create a link that uses ngClick to set the goCats variable to true or false .

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

Now you can show or hide the cat image with ng-show .

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

We use ng-src for images that are used in an angular application if the image is to be hidden. If you do not use this directive, the image will be shown at the time of downloading the application, and then disappears as soon as angular realizes that the image should be hidden.

Calculated expressions

Demo
Here we compute the string obtained from our input field. We associate the input field with ng-model with the variable aminal . Depending on the entered value, if there is a line, an image will be shown.

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

And in the ng-show directive we will calculate the value of this variable

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

Use with function

Demo
Here we will make a simple check whether the entered number is even or odd. We will create a function 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; }; 

Now, all we have to do is call the function with ng-show or ng-hide and pass the numbers to it.

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

Eventually

As we can see, a lot can be done with the help of these two simplest directives. Hope this helps you in building your applications. A little later there will be an article about using animations in conjunction with ngShow and ngHide.

Original article - scotch.io/tutorials/javascript/how-to-use-ngshow-and-nghide