In this article I will explain a simple tutorial with example, how to use the ng-show and ng-hide directives in AngularJS.
 
 

Showing and Hiding (Toggle) HTML DIV on Button click using ng-show directive

HTML Markup

The HTML Markup consists of following elements:
div – For applying ng-app and ng-controller AngularJS directives.
Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.
 
Button – For capturing user input.         
The HTML INPUT Button has been assigned with the ng-click AngularJS directive.
Note: If you want to learn more about ng-click directive, please refer my article AngularJS: Implement Button click event using ng-click directive example.
 
div – For displaying message.
The HTML INPUT Button has been assigned with the following ng-show AngularJS directive.
<div ng-app="MyApp" ng-controller="MyController">
    <input type="button" value="Show Hide DIV" ng-click="ShowHide()" />
    <br />
    <br />
    <div ng-show="IsVisible">ASPSnippets</div>
</div>
 

Implementing ng-show Directive

Inside the HTML Markup, the following JS script file is inherited:
1. angular.min.js
 
Inside the AngularJS Controller, a scope variable with name IsVisible is set to FALSE.
When the Button is clicked, the ShowHide function of the Controller gets called.
Inside this function, the IsVisible variable is set based on its previous state.
If before Button click its value was FALSE then it will become TRUE and vice versa.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module('MyApp', [])
    app.controller('MyController', function ($scope) {
        //By default the DIV will be hidden.
        $scope.IsVisible = false;
        $scope.ShowHide = function () {
            //If DIV is visible it will be hidden and vice versa.
            $scope.IsVisible = $scope.IsVisible ? false : true;
        }
    });
</script>
 
 

Showing and Hiding (Toggle) HTML DIV on Button click using ng-hide directive

HTML Markup

The HTML Markup consists of following elements:
div – For applying ng-app and ng-controller AngularJS directives.
Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.
 
Button – For capturing user input.
The HTML INPUT Button has been assigned with the ng-click AngularJS directive.
Note: If you want to learn more about ng-click directive, please refer my article AngularJS: Implement Button click event using ng-click directive example.
 
div – For displaying message.
The HTML INPUT Button has been assigned with the ng-hide AngularJS directive.
<div ng-app="MyApp" ng-controller="MyController">
    <input type="button" value="Show Hide DIV" ng-click="ShowHide()" />
    <br />
    <br />
    <div ng-hide="IsHidden">ASPSnippets</div>
</div>
 

Implementing ng-hide Directive

Inside the HTML Markup, the following JS script file is inherited:
1. angular.min.js
 
Inside the AngularJS Controller, a scope variable with name IsHidden is set to TRUE.
When the Button is clicked, the ShowHide function of the Controller gets called.
Inside this function, the IsHidden variable is set based on its previous state.
If before Button click its value was TRUE then it will become FALSE and vice versa.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module('MyApp', [])
    app.controller('MyController', function ($scope) {
        //By default the DIV will be hidden.
        $scope.IsHidden = true;
        $scope.ShowHide = function () {
            //If DIV is hidden it will be visible and vice versa.
            $scope.IsHidden = $scope.IsHidden ? false : true;
        }
    });
</script>
 
 

Screenshot

Simple AngularJS ng-show and ng-hide Tutorial with example
 
 

Demo

View Demo
 
 

Downloads

Download Code