In this tutorial we will show you the solution of ng-show in angularjs, here we shown example for ng-show directive so it will gives idea about how to handle what is the use for users.
When we using this directive it will make hidden anything to appear (i.e visible on webpage) sometimes when we work with websites we need to same things like in menu bar icon appearance or size will hidden to display another icon for look like animations.
Step By Step Guide On Ng-Show In Angularjs :-
Here we defined example using ng-show directive in angularjs.
We created checkbox and paragraph it is initially we sets <p> tag to hidden state so whenever user clicks on checkbox below will appear paragraph because of ng-show directive in angularjs.
It works by changing ng-show value to ‘false’ when user clicks on checkbox those are we defined in scope controller.
Ng-show used to show or hide the given HTML element according to the expression given to the ng-show attribute.
<!DOCTYPE html>
<html>
<head>
<title>ng-show Directive</title>
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<div ng-app="app" ng-controller="myctrl">
<h2>ng-show Directive</h2>
<input id="chshow" type="checkbox" ng-model="show" />
<label for="chshow">
Show Paragraph
</label>
<p ng-show="show">
Show this paragraph using ng-show
</p>
</div>
<script>
var myapp = angular.module("app", []);
myapp.controller("myctrl", function ($scope) {
$scope.show = false;
});
</script>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- This file contains angularjs is distributed as a javascript file and added to webpage must added by using <script> tag.
- In controller scope we defined our application and hold by variable ‘myapp’ then controller added to application with $scope object and function defined.
- In function we changing which HTML element has ng-show directive that’s value changed to ‘false’ so the result of paragraph will appear.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contains coding of entire website blocks and elements described here.
- Within a <div> tag we defined our ng-app namely ‘app’ it defines our application and controller of application namely ‘myctrl’ by ng-controller directive.
- Header tag <h2> used for describes heading of our concept and then we defined <input> tag with ‘checkbox’ type and ng-model value of ‘show’. The ng-model inserted to html element of input tag for binds input value to the <p> tag ng-show.
- So when user clicks on checkbox that value pointed by <p> tag with same name of ng-show directive within controller scope loads to appear the paragraph.
- The label created for input tag like description and using ‘for’ attribute it labeled with <input> tag by id attribute same value.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to show html elements using ng-show directive in angularjs.
In angularjs we can achieve anything too easily but in other languages will takes some time and complexity that’s the advantage.
With the help of ‘ng-show’ directive we can hide or show any html elements in angularjs.
When we sets directive value to false its appear if we sets to true it will disappear so its works based Boolean value.
We can do the same process to any html elements like button, header tags or div tag.
I hope this tutorial on ng-show in angularjs helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
