ng-keypress in AngularJS

ng-keypress in AngularJS

Wir werden ng-keypress in AngularJS mit Beispielen vorstellen.

Verwendung von ng-keypress in AngularJS

Bei der Arbeit an einer AngularJS-Anwendung gibt es viele Situationen, in denen wir einem Tastendruck ein Verhalten zuweisen müssen. Um benutzerdefiniertes Verhalten auf einen Tastendruck anzuwenden, müssen wir die Direktive ng-keypress in einem AngularJS verwenden.

Das ng-keypress-Mandat von AngularJS ersetzt nicht die Komponenten, die für den Tastendruck-Anlass einzigartig sind; beide werden hingerichtet. Dies wird durch die Elemente <input>, <select> und <textarea> unterstützt.

Syntax:

# angularjs
<input ng-keypress="behavior">

Das "behavior" bestimmt, was zu tun ist, wenn die Taste gedrückt wird.

Lassen Sie uns ein Beispiel haben und diese Direktive ng-keypress verwenden. Zuerst erstellen wir die Ansicht in index.html.

Code - index.html:

# angularjs
<!DOCTYPE html>
<html>

<head>
    <title>ng-keypress Directive By Rana Hasnain</title>

    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>

    <script type="text/javascript" src="app.js"></script>
</head>

<body style="text-align:center">
    <div ng-app="ngApp" ng-controller="ngController">
        <h1 style="color:Blue">
            Delft Stack
        </h1>

        Enter Name: <input type="text"
                ng-keypress="getKeyVal($event)" >

        <br><br>

        <span style="color:green;">
            Code of Key Is: {{valKey}}
        </span>
    </div>
</body>
</html>

Als nächstes erstellen wir eine Funktion, um die Schlüsselwerte in app.js zu erhalten.

Code - app.js:

# angularjs
var app = angular.module('ngApp', []);
        app.controller('ngController', function ($scope) {
            $scope.getKeyVal = function (event) {
                $scope.valKey = event.keyCode;
            }
        });

Ausgabe:

ng keypress im Beispiel von AngularJS

Genießen Sie unsere Tutorials? Abonnieren Sie DelftStack auf YouTube, um uns bei der Erstellung weiterer hochwertiger Videoanleitungen zu unterstützen. Abonnieren
Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn

Verwandter Artikel - Angular Directive