Envoyer le formulaire en appuyant sur Entrée avec AngularJS

Dans ce cas particulier, quelles options dois-je utiliser pour que ces entrées appellent une fonction lorsque j’appuie sur Entrée?

// HTML view // 
<input type="text" ng-model="name" />
<input type="text" ng-model="email" />
// Controller // .controller('mycontroller', ['$scope',function($scope) { $scope.name = ''; $scope.email = ''; // Function to be called when pressing ENTER $scope.myFunc = function() { alert('Submitted'); }; }])

Angular soutient cela hors de la boîte. Avez-vous essayé ngSubmit sur votre élément de formulaire?

 

EDIT: Selon le commentaire concernant le bouton de soumission, voir Soumission d’un formulaire en appuyant sur Entrée sans bouton de soumission qui donne la solution de:

  

Si vous n’aimez pas la solution du bouton d’envoi masqué, vous devrez associer une fonction de contrôleur à l’événement Entrer une pression ou une saisie. Cela nécessite normalement une directive personnalisée, mais la bibliothèque AngularUI a déjà une bonne solution de saisie de touche. Voir http://angular-ui.github.com/

Après avoir ajouté la bibliothèque angularUI, votre code ressemblerait à ceci:

 
... input fields ...

ou vous pouvez relier la touche Entrée à chaque champ individuel.

Aussi, consultez ces questions SO pour créer une directive simple de clavier: 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 très bonne solution avec:

Si vous voulez appeler la fonction sans formulaire, vous pouvez utiliser la directive ngEnter:

Javascript :

 angular.module('yourModuleName').directive('ngEnter', function() { return function(scope, element, attrs) { element.bind("keydown keypress", function(event) { if(event.which === 13) { scope.$apply(function(){ scope.$eval(attrs.ngEnter, {'event': event}); }); event.preventDefault(); } }); }; }); 

HTML :

 

Je soumets d’autres directives géniales sur mon compte Twitter et mon compte .

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 que vous souhaitez associer la fonctionnalité de clé d’entrée à un champ spécifique, vous pouvez l’intégrer à une entrée spécifique comme suit:

  

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 object javascript de la même manière que le ngClass :

HTML

  

Les valeurs de l’object sont évaluées dans le contexte de la scope de la directive – assurez-vous qu’elles sont regroupées dans des guillemets simples, sinon toutes les fonctions seront exécutées lorsque la directive est chargée (!)

Donc par exemple: esc : 'clear()' au lieu de esc : clear()

Javascript

 myModule .constant('keyCodes', { esc: 27, space: 32, enter: 13, tab: 9, backspace: 8, shift: 16, ctrl: 17, alt: 18, capslock: 20, numlock: 144 }) .directive('keyBind', ['keyCodes', function (keyCodes) { function map(obj) { var mapped = {}; for (var key in obj) { var action = obj[key]; if (keyCodes.hasOwnProperty(key)) { mapped[keyCodes[key]] = action; } } return mapped; } return function (scope, element, attrs) { var bindings = map(scope.$eval(attrs.keyBind)); element.bind("keydown keypress", function (event) { if (bindings.hasOwnProperty(event.which)) { scope.$apply(function() { scope.$eval(bindings[event.which]); }); } }); }; }]); 

Une autre approche consisterait à utiliser ng-keypress,

  

Soumettre une consortingbution en appuyant sur Entrée avec AngularJS – jsfiddle

Très bonne directive, propre et simple avec shift + enter support:

 app.directive('enterSubmit', function () { return { ressortingct: 'A', link: function (scope, elem, attrs) { elem.bind('keydown', function(event) { var code = event.keyCode || event.which; if (code === 13) { if (!event.shiftKey) { event.preventDefault(); scope.$apply(attrs.enterSubmit); } } }); } } }); 

Si vous voulez aussi la validation des données

  
...

L’ajout important ici est $loginForm.$valid qui validera le formulaire avant d’exécuter la fonction. Vous devrez append d’autres atsortingbuts pour la validation, ce qui dépasse le cadre de cette question.

Bonne chance.

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

 

Utilisez ng-submit et enveloppez les deux entrées dans des balises de formulaire distinctes:

 
/>

/>

Encapsuler chaque champ de saisie dans sa propre balise de formulaire permet à ENTER d’appeler submit sur les deux formulaires. Si vous utilisez une balise de formulaire pour les deux, vous devrez inclure un bouton de soumission.

Sera un peu plus propre en utilisant une classe CSS au lieu de répéter des styles en ligne.

CSS

 input[type=submit] { position: absolute; left: -9999px; } 

HTML

 

FWIW – Voici une directive que j’ai utilisée pour un modal bootstrap de confirmation / alerte de base, sans avoir besoin d’un

(il suffit de désactiver l’action de clic jQuery pour ce que vous voulez, et d’append data-easy-dismiss à votre balise modale)

 app.directive('easyDismiss', function() { return { ressortingct: 'A', link: function ($scope, $element) { var clickSubmit = function (e) { if (e.which == 13) { $element.find('[type="submit"]').click(); } }; $element.on('show.bs.modal', function() { $(document).on('keypress', clickSubmit); }); $element.on('hide.bs.modal', function() { $(document).off('keypress', clickSubmit); }); } }; });