For example, how to use ngShow and ngHide in AngularJS, angularjsngshow

For example, how to use ngShow and ngHide in AngularJS, angularjsngshow

Today, let's take a look at how to use Angular's ngShow and ngHide commands to complete what it sounds like to do, display, and hide!
What they should do

NgShow and ngHide allow us to display or hide different elements. This helps to create Angular applications because our single-page programs have a lot of moving parts coming and going as the application status changes.

The greatest part of these commands is that we do not have to use CSS or JS to perform display or hide operations. These are all done by sophisticated Angular.

Usage

To use ngShow or ngHide, you only need to add commands to the elements you want to display 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 multiple ways. You can set it to your Angular controller and display or hide your div when the application is loaded.

All of the above can be used for ng-show or ng-hide. If the value, expression, or function returns true, some things are hidden.

Used as a Boolean Value

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

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

Then we can use ng-show to display or hide classified images.

Ng-src: We use ng-src to call the image. In this way, Angular will confirm whether to hide the image when instantiating and checking it. If this is not the case, the image will pop up when the site is loaded until Angular realizes that it should be hidden.

Judgment Expression

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

Next we will focus our variable name on aminal.
 

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

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

Usage

We will perform 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, you can use ng-show or ng-hide and input our numbers. You can use this method to pass numbers to keep Angular clean and testable.
 

<!-- show if our function evaluates to false --><div ng-show="isEven(myNumber)">  
 
Conclusion
With these two guidelines, our applications will be greatly improved. these functions are implemented based on boolean values, expressions, and functions. However, these three modes can be applied to more scenarios.