Ng-Change-5

 

In this example we have checkbox and with the help of ng-change directive we call a function which assign the true or false value to the $scope.showhideprop variable. If we checked the checkbox then true value assign to this variable and a container with text shows and if we unchecked the checkbox then the false value assign to this variable and container will hide.

 
 
 
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Welcome to LearnKode - A code learning platform</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> </head> <body ng-app="changeExample"> <div ng-controller="ExampleController"> <div class="container"> <div class="col-md-3 well"> Show or Hide Div: <input type="checkbox" ng-model="chkStatus" ng-change="showHideDiv(chkStatus)" /> <br> </div> <div class="col-md-3 well" ng-show='showhideprop'> Hi Welcome to Angularjs... Hello World </div> </div> </div> <script> var app = angular.module("changeExample", []); app.controller('ExampleController', ['$scope', function ($scope) { $scope.showHideDiv = function (chkStatus) { $scope.showhideprop = chkStatus; } }]); </script> </body> </html>
Output