In this article I will explain a simple tutorial with example, how to use the ng-show and ng-hide directives in AngularJS.
AngularJS directives ng-show and ng-hide are used to show and hide elements.
 
 
AngularJS: Show Hide (Toggle) HTML DIV on Button click using ng-show directive
The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.
The HTML markup consists of an HTML DIV and a Button. The HTML DIV has been assigned ng-show directive. The value of ng-show directive has been set using the variable IsVisible which is initially set to false and hence the HTML DIV is hidden when page loads.
The Button has been assigned ng-click directive. When the Button is clicked, the ShowHide function of the Controller gets called.
Note: If you want to learn more about ng-click directive, please refer my article ng-click directive example.
Inside the function, the value of the IsVisible variable is reversed i.e. if it is true then it set to false and vice versa. This makes the HTML DIV toggle when the Button is clicked.
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope) {
            //This will hide the DIV by default.
            $scope.IsVisible = false;
            $scope.ShowHide = function () {
                //If DIV is visible it will be hidden and vice versa.
                $scope.IsVisible = $scope.IsVisible ? false : true;
            }
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <input type="button" value="Show Hide DIV" ng-click="ShowHide()" />
        <br />
        <br />
        <div ng-show = "IsVisible">My DIV</div>
    </div>
</body>
</html>
 
 
AngularJS: Show Hide (Toggle) HTML DIV on Button click using ng-hide directive
The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.
The HTML markup consists of an HTML DIV and a Button. The HTML DIV has been assigned ng-hide directive. The value of ng-hide directive has been set using the variable IsHidden which is initially set to true and hence the HTML DIV is hidden when page loads.
The Button has been assigned ng-click directive. When the Button is clicked, the ShowHide function of the Controller gets called.
Note: If you want to learn more about ng-click directive, please refer my article ng-click directive example.
Inside the function, the value of the IsHidden variable is reversed i.e. if it is true then it set to false and vice versa. This makes the HTML DIV toggle when the Button is clicked.
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope) {
            //This will hide the DIV by default.
            $scope.IsHidden = true;
            $scope.ShowHide = function () {
                //If DIV is hidden it will be visible and vice versa.
                $scope.IsHidden = $scope.IsHidden ? false : true;
            }
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <input type="button" value="Show Hide DIV" ng-click="ShowHide()" />
        <br />
        <br />
        <div ng-hide = "IsHidden">My DIV</div>
    </div>
</body>
</html>
 
 
Screenshot
Simple AngularJS ng-show and ng-hide Tutorial with example
 
 
Demo
View Demo
 
 
Downloads
Download Code