Examples of the use of Ngshow and nghide in Angularjs

This article mainly introduces an example of the use of Ngshow and Nghide in Angularjs, Angularjs is a very popular JavaScript framework, need friends can refer to the next

Today we'll look at how to use the angular ngshow and nghide instructions to complete what they sound like, show and hide!

The things they should do

Ngshow and Nghide allow us to show or hide different elements. This helps to create angular applications because our single page program has many moving parts that come and go as the application state changes.

The great part of these instructions is that we don't have to use CSS or JS to manipulate the display or hide it. These are accomplished by sophisticated angular.

Usage

To use Ngshow or nghide, simply add the instructions to the elements 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 ===============================--> <!--sh ow if the appstate variable is a string of goodbye--> <div ng-show= "appstate = = ' Goodbye '" >this is a goodbye mes Sage</div>   <!--for functions ===============================--> <!--use a function defined in R controller to evaluate if TRUE or false--> <div ng-hide= "checksomething ()" ></div>

Once we have set up our tags, we can set Hello or goodbye in a variety of ways. You can set it to your angular controller and let your div show or hide when the application is loaded.

All of these can be used for ng-show or ng-hide. If a value or an expression or function returns True, something is hidden.

Used as a Boolean value

We will create a link using ng-click and toggle the Gocats value to True or false.

<a href ng-click= "gocats =!gocats" >toggle cats</a>

Then we can use Ng-show to show or hide the categorized image.

NG-SRC we use NG-SRC to invoke the picture, so angular will confirm that it is hidden when the image is instantiated and examined. If we don't, the picture will bounce off when the site is loaded until angular realizes that it should be hidden.

Judge an expression

Here we judge a string from the input box, we bind the Ng-mode to the inside of an input box and name the aminal variable, and display different pictures based on the contents of the variable.

Below we will take our variable name Jiaozuo aminal.

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

We then use Ng-show to judge the string.

How to use

We will do a simple check to determine whether the input is odd or even. 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 Retu   RN false; };

After the method is created, the next thing we want to do is to use it through ng-show or ng-hide, and pass in our numbers. By means of the method of digital transmission, you can keep angular control neat and testable.

<!--Show if we function evaluates to False--> <div ng-show= "IsEven (mynumber)" >

Conclusion

With the guidance of these two directions, our application will be greatly improved. And these are just based on Boolean values, expressions, and functions that implement the element display and hide features but these three patterns will be applied to more scenarios.