AngularJS: Hide/Show Div using CheckBox 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.ShowHide = function()  
  16.             {  
  17.                 //If DIV is visible it will be hidden and vice versa.  
  18.                 $scope.IsVisible = $scope.ShowPassport;  
  19.             }  
  20.         });  
  21.     </script>  
  22.     <div ng-app="MyApp" ng-controller="MyController">  
  23.         <label for="chkPassport">  
  24.         <input type="checkbox" id="chkPassport" ng-model="ShowPassport" ng-change="ShowHide()" />  
  25.             Do you have Passport?  
  26.         </label>  
  27.         <hr />  
  28.         <div ng-show="IsVisible">  
  29.             Passport Number:  
  30.             <input type="text" id="txtPassportNumber" />  
  31.         </div>  
  32.     </div>  
  33. </body>  
  34.   
  35. </html>