What
is ng-keypress directive? Why we use it?
The ng-keypress is used to
specify to perform the custom behaviour on keypress event.
If you want to add and fire a keypress event on HTML TextBox that time we
need to use these events.
When you keypress on input textbox in the below example, the ngKeypress function get
called. As you can see in the below
controller function keypress get called after ngKeypress in TextBox.
//The HTML Code sample: <div> First Name:<input type="text" ng-model="firstName" ng-keypress="keypress(IsActive)"> Last Name: <input type="text" ng-model="lastName" ng-keypress="keypress(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.keypress = 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-keypress 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.keypress = 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-keypress="keypress(IsActive)"> Last Name: <input type="text" ng-model="lastName" ng-keypress="keypress(IsActive)"> </div> <div> <div ng-show="IsActive"> <h3>Full Name: {{firstName + " " + lastName}} </h3></div> </div> </div> </body> </html>The live output as,
Blogger Comment
Facebook Comment