Introduction:

In this article we will learn how to Use ng-keyup events directive in AngularJS or what is ng-keyup events directive in AngularJS or how to use ng-keyup events directive in AngularJS with example

Description:  

In angularjs ng-keyup event directive is used to raise events or execute custom functions immediately when key is starting to press in keyboard.

Suppose in angularjs application if you want to raise an event on keyup or call some custom functions immediately on key up it’s better to use ng-keyup event.

The ng-keyup event in angularjs will execute expression on key up and it will support <input>, <select>, <textarea> elements. 

The angularjs ng-keyup event will not override onkeyup event of html elements both will execute separately.

  • Syntax of AngularJS ng-keyup Event

Following is the syntax of using angularjs ng-keyup event directive in applications.

<element ng-keyup="expression"></element>

 

 Let’s see an example of  ng-keyup events  in AngularJS

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AngularJS.aspx.cs"
Inherits="AngularJSTutorials.AngularJS" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <script src="Scripts/angular.min.js"></script>
    <script>
        var app = angular.module("app", []);
        app.controller("KeyController", function ($scope) {           
            $scope.KeyUp = function () {
                $scope.keyup = " Key up executes " + new Date();
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div ng-app="app" ng-controller="KeyController">
            <p>Try writing something in the textbox below</p>            
            Key up:<input type="text" ng-keyup="KeyUp()" /><br />           
            <hr />           
            <p>Key up - {{ keyup }}</p>
        </div>
    </form>
</body>
</html>

 

In above code HTML block, we have declared a text box with ng-keyup directive that calls KeyUp() function respectively. When user starts writing something in the text box, respective event executes and writes the message below in the paragraph.

Output:

Use AngularJS ng-keyup Event with Example

I hope this article will help to you.

 

comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like