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

Dies ist eine Erweiterung der Antwort von EpokK.

Ich hatte das gleiche Problem, dass ich eine Scope-Funktion aufrufen musste, wenn Enter in ein Eingabefeld gedrückt wurde. Ich wollte jedoch auch den Wert des Eingabefelds an die angegebene Funktion übergeben. Hier ist meine Lösung:

app.directive('ltaEnter', function () {
return function (scope, element, attrs) {
    element.bind("keydown keypress", function (event) {
        if(event.which === 13) {
          // Closure mit korrektem Befehl erstellen
          var fn = function(command) {
            var cmd = command;
            return function() {
              scope.$eval(cmd);
            };
          }(attrs.ltaEnter.replace('()', '("'+ event.target.value +'")' ));

          // Funktion anwenden
          scope.$apply(fn);

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

});

Die Verwendung in HTML erfolgt wie folgt:

Einen Daumen hoch für EpokK für seine Antwort.

Answer 2

Was ist damit?

Jetzt, wenn Sie die Eingabetaste drücken, nachdem Sie etwas in Ihr Eingabefeld geschrieben haben, weiß das Formular, wie es damit umgehen soll.

Answer 3

Ich bin etwas spät dran .. aber ich habe eine einfachere Lösung gefunden, die auto-focus verwendet .. Dies könnte nützlich sein für Schaltflächen oder andere Elemente, wenn ein Dialog angezeigt wird :

ok

Das sollte funktionieren, wenn du die Schaltfläche mit der Leertaste oder der Eingabetaste drücken möchtest.

Answer 4

Ein Beispiel von Code, den ich für mein Projekt gemacht habe. Grundsätzlich fügst du Tags zu deiner Entität hinzu. Stell dir vor, du hast Eingabetext, beim Eingeben des Tag-Namens erhältst du ein Dropdown-Menü mit vorab geladenen Tags zur Auswahl, du navigierst mit den Pfeiltasten und wählst mit Enter:

HTML + AngularJS v1.2.0-rc.3

                            {{ preloadedTag.label }}

Controller.js

$scope.preloadTags = function () {
    var newTag = $scope.newTag;
    if (newTag && newTag.trim()) {
        newTag = newTag.trim().toLowerCase();

        $http(
            {
                method: 'GET',
                url: 'api/tag/gettags',
                dataType: 'json',
                contentType: 'application/json',
                mimeType: 'application/json',
                params: {'term': newTag}
            }
        )
            .success(function (result) {
                $scope.preloadedTags = result;
                $scope.preloadedTagsIndex = -1;
            }
        )
            .error(function (data, status, headers, config) {
            }
        );
    } else {
        $scope.preloadedTags = {};
        $scope.preloadedTagsIndex = -1;
    }
};

function checkIndex(index) {
    if (index > $scope.preloadedTags.length - 1) {
        return 0;
    }
    if (index < 0) {
        return $scope.preloadedTags.length - 1;
    }
    return index;
}

function removeAllActiveTags() {
    for (var x = 0; x < $scope.preloadedTags.length; x++) {
        if ($scope.preloadedTags[x].activeTag) {
            $scope.preloadedTags[x].activeTag = false;
        }
    }
}

$scope.navigateTags = function ($event) {
    if (!$scope.newTag || $scope.preloadedTags.length == 0) {
        return;
    }
    if ($event.keyCode == 40) {  // runter
        removeAllActiveTags();
        $scope.preloadedTagsIndex = checkIndex($scope.preloadedTagsIndex + 1);
        $scope.preloadedTags[$scope.preloadedTagsIndex].activeTag = true;
    } else if ($event.keyCode == 38) {  // hoch
        removeAllActiveTags();
        $scope.preloadedTagsIndex = checkIndex($scope.preloadedTagsIndex - 1);
        $scope.preloadedTags[$scope.preloadedTagsIndex].activeTag = true;
    } else if ($event.keyCode == 13) {  // enter
        removeAllActiveTags();
        $scope.selectTag($scope.preloadedTags[$scope.preloadedTagsIndex]);
    }
};

$scope.selectTag = function (preloadedTag) {
    $scope.addTag(preloadedTag.label);
};

CSS + Bootstrap v2.3.2

.preloadedTagPanel {
    background-color: #FFFFFF;
    display: block;
    min-width: 250px;
    max-width: 700px;
    border: 1px solid #666666;
    padding-top: 0;
    border-radius: 0;
}

.preloadedTagItemPanel {
    background-color: #FFFFFF;
    border-bottom: 1px solid #666666;
    cursor: pointer;
}

.preloadedTagItemPanel:hover {
    background-color: #666666;
}

.preloadedTagItemPanelActive {
    background-color: #666666;
}

.preloadedTagItem {
    display: inline-block;
    text-decoration: none;
    margin-left: 5px;
    margin-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 20px;
    padding-right: 10px;
    color: #666666 !important;
    font-size: 11px;
}

.preloadedTagItem:hover {
    background-color: #666666;
}

.preloadedTagItemActive {
    background-color: #666666;
    color: #FFFFFF !important;
}

.dropdown .preloadedTagItemPanel:last-child {
    border-bottom: 0;
}

Answer 5

Hier ist meine Direktive:

mainApp.directive('number', function () {
    return {
        link: function (scope, el, attr) {
            el.bind("keydown keypress", function (event) {
                //ignoriere alle Zeichen, die keine Zahlen sind, außer Rücktaste, Löschen, Pfeil nach links und Pfeil nach rechts
                if ((event.keyCode < 48 || event.keyCode > 57) && event.keyCode != 8 && event.keyCode != 46 && event.keyCode != 37 && event.keyCode != 39) {
                    event.preventDefault();
                }
            });
        }
    };
});

Verwendung: