Ng-Change-6

 

In this example we have a textbox to hide and show the container with text. With the help of ng-change directive we calling a funtion on change of the textbox value , we change the visibility of the container in this function. When we call the funtion we pass the value of the textbox and if value is show then we set the value of $scope.showhideprop variable to true which will show the container and if textbox has hide value then we set the value of $scope.showhideprop variable to false which will hide the container.

 
 
 
<!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"> Write Show or Hide: <input type="text" ng-model="textVal" ng-change="showHideDiv(textVal)" /> <br /> <br /> <span ng-show='showhideprop'>Hi Welcome to Angularjs... Hello World</span> </div> </div> </div> <script> var app = angular.module("changeExample", []); app.controller('ExampleController', ['$scope', function ($scope) { $scope.showHideDiv = function (chkStatus) { if (chkStatus == 'Hide' || chkStatus == 'hide' || chkStatus == 'HIDE') $scope.showhideprop = false; else if (chkStatus == 'Show' || chkStatus == 'show' || chkStatus == 'SHOW') $scope.showhideprop = true; } }]); </script> </body> </html>
Output