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 können ng-keydown ="myFunction($event)" als Attribut verwenden.

myFunction(event) {
    if(event.keyCode == 13) {   // '13' ist der Schlüsselcode für Eingabe
        // Tun Sie, was Sie tun möchten, wenn 'Eingabe' gedrückt wird :)
    }
}

Answer 2

html

controller.js

$scope.keyPressed = function (keyEvent) {
    if (keyEvent.keyCode == 13) {
        alert('Enter wurde gedrückt');
        console.log('Enter wurde gedrückt');
    }
};

Answer 3

Sie können es auch auf einen Controller auf einem übergeordneten Element anwenden. Dieses Beispiel kann verwendet werden, um eine Zeile in einer Tabelle durch Drücken der Pfeiltasten nach oben/unten hervorzuheben.

app.controller('tableCtrl', [ '$scope', '$element', function($scope, $element) {
  $scope.index = 0; // Zeilenindex
  $scope.data = []; // Array von Elementen
  $scope.keypress = function(offset) {
    console.log('Tastendruck', offset);
    var i = $scope.index + offset;
    if (i < 0) { i = $scope.data.length - 1; }
    if (i >= $scope.data.length) { i = 0; }
  };
  $element.bind("keydown keypress", function (event) {
    console.log('Tastendruck', event, event.which);
    if(event.which === 38) { // nach oben
      $scope.keypress(-1);
    } else if (event.which === 40) { // nach unten
      $scope.keypress(1);
    } else {
      return;
    }
    event.preventDefault();
  });
}]);

        {{key}}

        {{value}}

Answer 4

Versuch

ng-keypress="console.log($event)"
ng-keypress="alert(123)"

hat bei mir nichts bewirkt.

Merkwürdigerweise funktioniert das Beispiel auf https://docs.angularjs.org/api/ng/directive/ngKeypress, welches ng-keypress="count = count + 1" lautet.

Ich habe eine alternative Lösung gefunden, bei der das Drücken von Enter das ng-click des Buttons auslöst.

Fertig

Answer 5

Geben Sie Ihren Namen ein: 
Einreichen
{{resposta}} 

var app = angular.module('myApp', []);
//create a service mitsuplik
app.service('mitsuplik', function() {
    this.myFunc = function (parametro) {
        var tmp = ""; 
        for (var x=0;x<parametro.length;x++)
            {
            tmp = parametro.substring(x,x+1) + tmp;
            } 
        return tmp;
    }
});
//Aufrufen unseres Dienstes
app.controller('myCtrl', function($scope, mitsuplik) { 
  $scope.chamar = function() { 
        $scope.resposta = mitsuplik.myFunc($scope.pergunta); 
    };
  //Wenn mitsuplik [ENTER] drückt, auch ausführen
  $scope.pressionou_enter = function(keyEvent) {
             if (keyEvent.which === 13) 
                { 
                $scope.chamar();
                }

    }
});