Angular prend cela en charge. Avez-vous essayé ngSubmit sur votre élément de formulaire?
<form ng-submit="myFunc()" ng-controller="mycontroller">
<input type="text" ng-model="name" />
<br />
<input type="text" ng-model="email" />
</form>
MODIFIER: Selon le commentaire concernant le bouton Soumettre , voir Soumettre un formulaire en appuyant sur Entrée sans bouton Soumettre ce qui donne la solution de:
<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
Si vous n'aimez pas la solution de bouton d'envoi caché, vous devrez lier une fonction de contrôleur à l'événement Enter keypress ou keyup. Cela nécessite normalement une directive personnalisée, mais la bibliothèque AngularUI a déjà une belle solution de pression de touches configurée. Voir http://angular-ui.github.com/
Après avoir ajouté la lib angularUI, votre code serait quelque chose comme:
<form ui-keypress="{13:'myFunc($event)'}">
... input fields ...
</form>
ou vous pouvez lier la touche Entrée à chaque champ individuel.
Consultez également ces questions SO pour créer une simple directive keypres:
Comment puis-je détecter onKeyUp dans AngularJS?
EDIT (2014-08-28): Au moment où cette réponse a été écrite, ng-keypress / ng-keyup / ng-keydown n'existait pas en tant que directives natives dans AngularJS. Dans les commentaires ci-dessous @ darlan-alves a une assez bonne solution avec:
<input ng-keyup="$event.keyCode == 13 && myFunc()"... />
ng-submit="join()"
un contrôleur d'enregistrement qui avait$scope.join = function() {...}
et je changeais le nom de la fonction pour que lafoo()
soumission du bouton d'entrée fonctionne à nouveau.ng-keyup="$event.keyCode == 13 && myFunc()"
Vraiment génial :)Si vous voulez appeler une fonction sans formulaire, vous pouvez utiliser ma directive ngEnter:
Javascript :
HTML :
Je soumets d'autres directives impressionnantes sur mon twitter et mon compte essentiel .
la source
keydown
etkeypress
sans virgule pour les délimiter signifie que les deux peuvent se déclencher simultanément. Cela est susceptible de générer des erreurs $ rootScope: inprog. L'ajout d'une virgule entre eux crée un caractère disjonctif et garantit que seul le cycle $ digest se produit. Impossible d'appliquer la modification car il ne s'agit que d'un seul caractère.Si vous n'avez qu'une seule entrée, vous pouvez utiliser la balise de formulaire.
Si vous avez plusieurs entrées, ou si vous ne souhaitez pas utiliser la balise de formulaire, ou si vous souhaitez attacher la fonctionnalité de touche d'entrée à un champ spécifique, vous pouvez l'inclure dans une entrée spécifique comme suit:
la source
Je voulais quelque chose d'un peu plus extensible / sémantique que les réponses données, j'ai donc écrit une directive qui prend un objet javascript de la même manière que le intégré
ngClass
:HTML
Les valeurs de l'objet sont évaluées dans le contexte de la portée de la directive - assurez-vous qu'elles sont mises entre guillemets simples, sinon toutes les fonctions seront exécutées lorsque la directive sera chargée (!)
Ainsi, par exemple:
esc : 'clear()'
au lieu deesc : clear()
Javascript
la source
'vm.doTheThing("myVar")'
Une autre approche consisterait à utiliser ng-keypress,
Soumettre une entrée en appuyant sur Entrée avec AngularJS - jsfiddle
la source
Directive très bonne, propre et simple avec support shift + enter:
la source
Si vous souhaitez également la validation des données
L'ajout important ici est de
$loginForm.$valid
valider le formulaire avant d'exécuter la fonction. Vous devrez ajouter d'autres attributs pour la validation qui sortent du cadre de cette question.Bonne chance.
la source
Je voulais juste souligner que dans le cas d'un bouton d'envoi caché, vous pouvez simplement utiliser la directive ngShow et la définir sur false comme suit:
HTML
la source
<button ng-show="false"></button>
est encore plus court. Pas besoin de définir la valeur d'un bouton invisible.type="submit"
J'ai cru comprendre que pour déclencher la directive ng-submit, une entrée de ... Je suppose que la valeur pouvait être ignorée, mais je pense que la première est nécessaire.Utilisez ng-submit et enveloppez simplement les deux entrées dans des balises de formulaire distinctes:
Envelopper chaque champ de saisie dans sa propre balise de formulaire permet à ENTRÉE d'appeler soumettre sur l'un ou l'autre formulaire. Si vous utilisez une balise de formulaire pour les deux, vous devrez inclure un bouton d'envoi.
la source
Sera légèrement plus net en utilisant une classe CSS au lieu de répéter des styles en ligne.
CSS
HTML
la source
FWIW - Voici une directive que j'ai utilisée pour un mode d'amorçage de confirmation / alerte de base, sans avoir besoin d'un
<form>
(il suffit de désactiver l'action de clic jQuery pour tout ce que vous aimez et de l'ajouter
data-easy-dismiss
à votre balise modale)la source