Wie man ein Tastendruck-Ereignis in AngularJS verwendet?

Question

Ich möchte das KeyPress-Ereignis der Eingabetaste im untenstehenden Textfeld erfassen. Um es klarer zu machen, verwende ich ein ng-repeat , um das tbody zu füllen. Hier ist der HTML-Code:

Das ist mein Modul:

angular.module('components', ['ngResource']);

Ich verwende eine Ressource, um die Tabelle zu füllen, und mein Controller-Code lautet:

function Ajaxy($scope, $resource) {
//Controller, der eine Ressource hat, um die Tabelle zu füllen
}

Answer 1

Sie müssen eine Direktive hinzufügen, wie hier:

Javascript:

app.directive('myEnter', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            if(event.which === 13) {
                scope.$apply(function (){
                    scope.$eval(attrs.myEnter);
                });

                event.preventDefault();
            }
        });
    };
});

HTML:

Answer 2

Eine Alternative ist die Verwendung der Standardanweisung ng-keypress="myFunct($event)"

Dann können Sie in Ihrem Controller haben:

...

$scope.myFunct = function(keyEvent) {
  if (keyEvent.which === 13)
    alert('Ich bin ein Alert');
}

...

Answer 3

Mein einfachster Ansatz unter Verwendung der Angular-Direktive:

ng-keypress, ng-keydown oder ng-keyup.

Normalerweise möchten wir die Tastaturunterstützung für etwas hinzufügen, das bereits von ng-click behandelt wird.

zum Beispiel:

Aktion

Jetzt fügen wir Tastaturunterstützung hinzu.

ausgelöst durch die Eingabetaste:

Aktion

durch die Leertaste:

Aktion

durch die Leertaste oder Eingabetaste:

Aktion

wenn Sie einen modernen Browser verwenden

Aktion

Mehr zum keyCode:
keyCode ist veraltet, aber eine gut unterstützte API, Sie könnten in unterstützten Browsern stattdessen $evevt.key verwenden.
Mehr unter https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

Answer 4

Eine weitere einfache Alternative:

Und die ng-ui Alternative:

Answer 5

Hier ist, was ich herausgefunden habe, als ich eine App mit ähnlichen Anforderungen erstellt habe, es erfordert nicht das Schreiben einer Direktive und es ist relativ einfach zu verstehen, was es macht: