ng-hide and ng-show

These both directives ng-show and ng-hide are used to manage the visibility of html controls. Both directives take true and false value to display or hide the html control.

Example of ng-show

		
<!DOCTYPE html>
<html>
<head>
    <title>ng-hide and ng-show example</title>
   <script src="angular.min.js"></script>
</head>
<body ng-app>
     <input type="checkbox" ng-model="textbox" value="show textbox"/>Show Textbox
    <br>
     <input type="text" ng-show="textbox"/>
    <br>
</body>
</html>
		
		

In this example we have created checkbox and bind it with ng-model. And used this ng-model in ng-show directives. When page load it would not be true so it will not display textbox. But when we checked the checkbox then it would be true and it will display the textbox.

		
		what is ng-hide
		Figure 1
		
		

Example of ng-hide

Similarly, we can use ng-hide

		
		<input type="checkbox" ng-model="textbox" value="show textbox"/>Hide Textbox
    <br>
     <input type="text" ng-hide="textbox"/>


		
		

Check the ouput

		
		what is ng-show
		Figure 2