In this article I will explain with an example, how to show and hide (Toggle) HTML DIV on Button click using ng-show and ng-hide directives in AngularJS.
 
 

AngularJS: Show Hide (Toggle) HTML DIV on Button click using ng-show directive

HTML Markup

The HTML Markup consists of following controls:
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 following AngularJS directive.
ng-click – Triggers when user clicks the Button.
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 AngularJS directive.
ng-show – For controlling the visibility of element.
<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 file is inherited:
1. angular.min.js
Then, inside the 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.
Inside this function, the IsVisible variable is set based on its previous state i.e. If 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.IsVisible = false;
        $scope.ShowHide = function () {
            //If DIV is visible it will be hidden and vice versa.
            $scope.IsVisible = $scope.IsVisible ? false : true;
        }
    });
</script>
 
 

AngularJS: Show Hide (Toggle) HTML DIV on Button click using ng-hide directive

HTML Markup

The HTML Markup consists of following controls:
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 following AngularJS directive.
ng-click – Triggers when user clicks the Button.
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 AngularJS directive.
ng-hide – For controlling the visibility of element.
<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 file is inherited:
1. angular.min.js
Then, inside the 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.
Inside this function, the IsHidden variable is set based on its previous state i.e. If 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

AngularJS: Show Hide (Toggle) HTML DIV on Button click using ng-show and ng-hide
 
 

Demo

View Demo
 
 

Downloads

Download Code