The ng-change
is used to specify to perform the custom behaviour on
change event.
If you want to add and fire a change event
on HTML TextBox that time we need to use these events.
When you change on input textbox in
the below example, the ngChange function get called. As you can see in the below controller
function "change" get called after change key in TextBox.
The example as,
//The HTML Code sample: <div> First Name:<input type="text" ng-model="firstName" ng-change="change(IsActive)"> Last Name: <input type="text" ng-model="lastName" ng-change="change(IsActive)"> </div> //The AngularJs Code sample: var app = angular.module('myApp', []); app.controller('ngClickCtrl', function ($scope) { $scope.firstName = "Anil"; $scope.lastName = "Singh"; $scope.IsActive = false; $scope.change = function (IsActive) { if (!IsActive) { $scope.IsActive = true; } else { $scope.IsActive = false; } }; }); //The AngularJs and HTML code sample: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>What is ng-change directive? Why we use it?</title> @*<script src="https://code.angularjs.org/1.4.1/angular.js"></script>*@ <script> var app = angular.module('myApp', []); app.controller('ngClickCtrl', function ($scope) { $scope.firstName = "Anil"; $scope.lastName = "Singh"; $scope.IsActive = false; $scope.change = function (IsActive) { if (!IsActive) { $scope.IsActive = true; } else { $scope.IsActive = false; } }; }); </script> </head> <body ng-app="myApp"> <div ng-controller="ngClickCtrl"> <div> First Name:<input type="text" ng-model="firstName" ng-change="change(IsActive)"> Last Name: <input type="text" ng-model="lastName" ng-change="change(IsActive)"> </div> <div> <div ng-show="IsActive"> <h3>Full Name: {{firstName + " " + lastName}} </h3></div> </div> </div> </body> </html>The live output as,
About Blogger
|
Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
|
0 comments:
Post a Comment