Post
Ask Question

AngularJS: Hide/Show Div on RadioButton click event

  1. <html>  
  2.   
  3. <head>  
  4.     <title></title>  
  5. </head>  
  6.   
  7. <body>  
  8.     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>  
  9.     <script type="text/javascript">  
  10.         var app = angular.module('MyApp', [])  
  11.         app.controller('MyController', function($scope)  
  12.         {  
  13.             //This will hide the DIV by default.  
  14.             $scope.IsVisible = false;  
  15.             $scope.ShowPassport = function(value)  
  16.             {  
  17.                 //If DIV is visible it will be hidden and vice versa.  
  18.                 $scope.IsVisible = value == "Y";  
  19.             }  
  20.         });  
  21.     </script>  
  22.     <div ng-app="MyApp" ng-controller="MyController">  
  23.         <label for="chkPassport">  
  24. Do you have Passport?  
  25. Yes <input type="radio" name="Passport" ng-click="ShowPassport('Y')" />  
  26. No <input type="radio" name="Passport" ng-click="ShowPassport('N')" />  
  27. </label>  
  28.         <hr />  
  29.         <div ng-show="IsVisible">  
  30.             Passport Number:  
  31.             <input type="text" id="txtPassportNumber" />  
  32.         </div>  
  33.     </div>  
  34. </body>  
  35.   
  36. </html>