ng-hide and ng-show in angularjs

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.


ng-show example


<!DOCTYPE html>
<html lang="en">
<head>
    <title>ng-hide and ng-show example</title>
    <meta charset="utf-8">
    <script src="angular.min.js"></script>
</head>
<body data-ng-app>
    <label>
        <input type="checkbox" data-ng-model="textbox"> Show Textbox
    </label>
    <input type="text" data-ng-show="textbox">
</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
		
		

ng-hide example

Similarly, we can use ng-hide to hide and element.


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

Check the ouput

		
		what is ng-show
		Figure 2