In this article I will explain with an example, how to show hide (toggle) HTML DIV on RadioButton click i.e. checked – unchecked or selected – unselected using ng-show and ng-click directives.
 
 
Show Hide (Toggle) HTML DIV on RadioButton click using ng-show and ng-click
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 two RadioButtons. 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.
 
Note: If you want to learn more about ng-show directive, please refer my article AngularJS ng-show Tutorial.
 
The RadioButtons have been assigned ng-click directive. When any RadioButton is clicked i.e. checked – unchecked or selected – unselected, the ShowPassport function of the Controller gets called with the respective parameter i.e. Y for Yes RadioButton and N for No RadioButton.
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 Yes or No RadioButtons are clicked i.e. checked – unchecked or selected – unselected.
<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.ShowPassport = function (value) {
                //If DIV is visible it will be hidden and vice versa.
                $scope.IsVisible = value == "Y";
            }
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <label for="chkPassport">
            Do you have Passport?
            Yes <input type="radio" name="Passport" ng-click="ShowPassport('Y')" />
            No <input type="radio" name="Passport" ng-click="ShowPassport('N')" />
        </label>
        <hr />
        <div ng-show="IsVisible">
            Passport Number:
            <input type="text" id="txtPassportNumber" />
        </div>
    </div>
</body>
</html>
 
 
Screenshot
AngularJS RadioButton: Show Hide (Toggle) HTML DIV on RadioButton click using ng-show and ng-click
 
 
Demo
View Demo
 
 
Downloads
Download Code