Sunday, March 29, 2015

ng-keyup event

AngularJS provides various keyboard events to track events raised by user interaction with the keyboard like Keyup, KeyUp, KeyPress etc, in this post we shall see on how to handle the keyup event using AngularJS

AngularJS provides ng-keyup directive to handle keyup events raised by the user, keyup event can be handled by associating the ng-keyup directive to an event handler function which passes the key event as a parameter.

The following example shows on how to use the ng-keyup directive to handle keyup events raised by the user.


<html ng-app="keyUpApp">
<head>
    <meta charset="utf-8">
    <title>AngularJS - Basic</title>
    <script src="angular.min.js"></script>
    <script>
var app = angular.module('keyUpApp', []);

function keyUpController($scope) {
           $scope.HandleEvent = function (keyEvent) {
                $scope.CurrentKey = (window.event ? keyEvent.keyCode : keyEvent.which);
                $scope.AltKey = keyEvent.altKey;
                $scope.ShiftKey = keyEvent.shiftKey;
              };
};
</script>
</head>
<body>
          <div ng-controller="keyUpController">
                   <input type="text" ng-keyup="HandleEvent($event)"><br/><br/>
                   keyUp on Key (KeyCode): {{CurrentKey}} <br/>
                   Alt Key presses: {{AltKey}} <br/>
                   Shift Key presses: {{ShiftKey}} <br/>
                   </div>
          </div>
</body>
</html> 




Search Flipkart Products:
Flipkart.com

No comments: