LearnKode

6 Example(s) of Ng-Keyup


Description :

In this example of Ng-Keyup we have textbox. Type in this textbox when you and on the key up you will get the ascii value of the pressed key. For example ascii value of enter is 13, 8 of backspace, 65 of "A" etc etc.


Ng-Keyup Example - 1 
<!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>
    <div>
        Type in text box to update key code.<br />
        <input type="text" ng-keyup="event=$event" /><br />
        Key Code:{{event.keyCode}}
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

In textbox ng-keyup event increase the count by 1 each time when key is up.


Ng-Keyup Example - 2 
<!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>
    <div>
        Type in text box to update count value.<br />
        <input type="text" ng-keyup="count=count+1" /><br />
        Count:{{count}}
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

In this we can filter student name on ng-keyup event.When we type in textbox its value bind to the searchValue variable and student will search from array of object using ng-repeat directive.


Ng-Keyup Example - 3 
<!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="clickExample">
    <div ng-controller="ExampleController">
        <b>Search:</b><input type="text" ng-model="searchValue" ng-keyup="val=searchValue" />
        <div ng-repeat="student in students | filter:val">{{student.name}}</div>
    </div>
<script>
    var app = angular.module("clickExample", []);
    app.controller('ExampleController', ['$scope', function ($scope) {
        $scope.students = [{ name: 'John' }, { name: 'Smith' }, { name: 'Allen' }, { name: ' Johnson' }, { name: 'Harris' }, { name: ' Williams' }, { name: 'David' }];
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

In this we can filter student name on ng-keyup event.When we type in textbox its value bind to the searchValue variable and its value compare to dropdown value.


Ng-Keyup Example - 4 
<!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="clickExample">
    <div ng-controller="ExampleController" ng-init="name='John'">
        <b>Search: </b><input type="text" ng-model="searchValue" ng-keyup="val=searchValue" /><br />
        Select Student: <select ng-model="name" ng-options="p.name as p.name for  p in students | filter:val">{{student.name}}</select>
    </div>
<script>
    var app = angular.module("clickExample", []);
    app.controller('ExampleController', ['$scope', function ($scope) {
        $scope.students = [{ name: 'John' }, { name: 'Smith' }, { name: 'Allen' }, { name: 'Johnson' }, { name: 'Harris' }, { name: 'Williams' }, { name: 'David' }];
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

When we type in textbox on ng-keyup and ng-keydown event set the value of isCheckedKeyUp and isCheckedKeyDown to true which is bind to the checkboxes respectively.


Ng-Keyup Example - 5 
<!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>
    <div>
        Text: <input type="text" ng-model="text" ng-keyup="isCheckedKeyUp=true" ng-keydown="isCheckedKeyDown=true" /><br />
        Is KeyUp: <input type="checkbox" ng-model="isCheckedKeyUp" /><br />
        Is KeyDown: <input type="checkbox" ng-model="isCheckedKeyDown" />
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

When we type in textbox ng-keyup event will call the lUpperCase(text) function which convert the uppercase character to lowercase.Text is a variable to which textbox is bind.


Ng-Keyup Example - 6 
<!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="clickExample">
    <div ng-controller="ExampleController">
        Lower Case: <input type="text" ng-model="text" ng-keyup="UpperCase(text)" /><br />
    </div>
<script>
    var app = angular.module("clickExample", []);
    app.controller('ExampleController', ['$scope', function ($scope) {
        $scope.UpperCase = function (txt) {
            $scope.text = txt.toLocaleUpperCase();
        }
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output