Angular unterstützt dies sofort. Haben Sie ngSubmit für Ihr Formularelement ausprobiert ?
<form ng-submit="myFunc()" ng-controller="mycontroller">
<input type="text" ng-model="name" />
<br />
<input type="text" ng-model="email" />
</form>
BEARBEITEN: Gemäß dem Kommentar zur Schaltfläche " Senden" finden Sie unter Senden eines Formulars durch Drücken der Eingabetaste ohne Schaltfläche "Senden" die folgende Lösung:
<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
Wenn Ihnen die versteckte Submit-Button-Lösung nicht gefällt, müssen Sie eine Controller-Funktion an das Enter-Tastendruck- oder Keyup-Ereignis binden. Dies erfordert normalerweise eine benutzerdefinierte Direktive, aber in der AngularUI-Bibliothek ist bereits eine nette Tastendrucklösung eingerichtet. Siehe http://angular-ui.github.com/
Nach dem Hinzufügen der angleUI lib wäre Ihr Code ungefähr so:
<form ui-keypress="{13:'myFunc($event)'}">
... input fields ...
</form>
oder Sie können die Eingabetaste an jedes einzelne Feld binden.
Weitere Informationen zum Erstellen einer einfachen keypres-Direktive finden Sie in den folgenden SO-Fragen:
Wie kann ich onKeyUp in AngularJS erkennen?
EDIT (28.08.2014): Zum Zeitpunkt der Erstellung dieser Antwort existierte ng-keypress / ng-keyup / ng-keydown nicht als native Direktiven in AngularJS. In den Kommentaren unten hat @ darlan-alves eine ziemlich gute Lösung mit:
<input ng-keyup="$event.keyCode == 13 && myFunc()"... />
ng-submit="join()"
einen Registrierungs-Controller verwendet, der$scope.join = function() {...}
diesen Funktionsnamen hatte, und ihn geändert, damitfoo()
die Eingabe der Eingabetaste wieder funktioniert.ng-keyup="$event.keyCode == 13 && myFunc()"
Wirklich großartig :)Wenn Sie eine Funktion ohne Formular aufrufen möchten, können Sie meine ngEnter-Direktive verwenden:
Javascript :
HTML :
Ich reiche andere großartige Anweisungen ein reiche meinem Twitter und meinem Hauptkonto ein .
quelle
keydown
als auch diekeypress
Ereignisse ohne Komma hinzufügen, um sie abzugrenzen, können beide gleichzeitig ausgelöst werden. Dies führt wahrscheinlich zu $ rootScope: Inprog-Fehlern. Das Hinzufügen eines Kommas zwischen ihnen erzeugt einen Disjunktiv und stellt sicher, dass nur der $ Digest-Zyklus auftritt. Die Bearbeitung konnte nicht angewendet werden, da es sich nur um ein einzelnes Zeichen handelt.Wenn Sie nur eine Eingabe haben, können Sie das Formular-Tag verwenden.
Wenn Sie mehr als eine Eingabe haben oder das Formular-Tag nicht verwenden oder die Eingabetaste an ein bestimmtes Feld anhängen möchten, können Sie es wie folgt an eine bestimmte Eingabe anhängen:
quelle
Ich wollte etwas, das etwas erweiterbarer / semantischer ist als die gegebenen Antworten, also schrieb ich eine Direktive, die ein Javascript-Objekt ähnlich wie das eingebaute verwendet
ngClass
:HTML
Die Werte des Objekts werden im Kontext des Gültigkeitsbereichs der Direktive ausgewertet. Stellen Sie sicher, dass sie in einfache Anführungszeichen gesetzt sind. Andernfalls werden alle Funktionen ausgeführt, wenn die Direktive geladen wird (!).
Also zum Beispiel:
esc : 'clear()'
stattesc : clear()
Javascript
quelle
'vm.doTheThing("myVar")'
Ein anderer Ansatz wäre die Verwendung von ng-keypress,
Senden Sie eine Eingabe, indem Sie mit AngularJS - jsfiddle die Eingabetaste drücken
quelle
Sehr gute, saubere und einfache Anweisung mit Shift + Enter-Unterstützung:
quelle
Wenn Sie auch eine Datenüberprüfung wünschen
Der wichtige Zusatz hier ist,
$loginForm.$valid
der das Formular validiert, bevor die Funktion ausgeführt wird. Sie müssen andere Attribute zur Validierung hinzufügen, die den Rahmen dieser Frage sprengen.Viel Glück.
quelle
Ich wollte nur darauf hinweisen, dass Sie im Fall einer versteckten Senden-Schaltfläche einfach die ngShow-Direktive verwenden und sie wie folgt auf false setzen können:
HTML
quelle
<button ng-show="false"></button>
ist noch kürzer. Der Wert einer unsichtbaren Schaltfläche muss nicht festgelegt werden.type="submit"
... Ich nehme an, der Wert könnte ignoriert werden, aber ich glaube, der erstere ist notwendig.Verwenden Sie ng-submit und verpacken Sie beide Eingaben in separate Formular-Tags:
Wenn Sie jedes Eingabefeld in ein eigenes Formular-Tag einschließen, kann ENTER in beiden Formularen die Übermittlung aufrufen. Wenn Sie für beide ein Formular-Tag verwenden, müssen Sie eine Senden-Schaltfläche einfügen.
quelle
Wird mit einer CSS-Klasse etwas ordentlicher sein, anstatt Inline-Stile zu wiederholen.
CSS
HTML
quelle
FWIW - Hier ist eine Anweisung, die ich für ein grundlegendes Bootstrap-Modal zur Bestätigung / Warnung verwendet habe, ohne dass ein
<form>
(Schalten Sie einfach die jQuery-Klickaktion aus, was Sie möchten, und fügen Sie
data-easy-dismiss
sie Ihrem modalen Tag hinzu.)quelle