Invia modulo premendo Invio con AngularJS

In questo caso particolare, quali opzioni devo fare per chiamare questi input una funzione quando premo Invio?

// 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'); }; }])

Angolare supporta questo fuori dalla scatola. Hai provato ngSubmit sul tuo elemento form?

 

EDIT: per il commento relativo al pulsante di invio, vedi Invio di un modulo premendo invio senza un pulsante di invio che fornisce la soluzione di:

  

Se non ti piace la soluzione del pulsante di invio nascosto, dovrai associare una funzione del controller alla pressione del tasto Invio o all’evento chiave. Questo normalmente richiede una direttiva personalizzata, ma la libreria AngularUI ha già una buona soluzione per la pressione dei tasti. Vedi http://angular-ui.github.com/

Dopo aver aggiunto l’angularUI lib, il tuo codice sarebbe qualcosa del tipo:

 
... input fields ...

oppure è ansible associare la pressione del tasto Invio a ogni singolo campo.

Inoltre, vedi queste domande SO per creare una semplice direttiva keypres: Come posso rilevare onKeyUp in AngularJS?

EDIT (2014-08-28): al momento in cui questa risposta è stata scritta, ng-keypress / ng-keyup / ng-keydown non esisteva come direttive native in AngularJS. Nei commenti qui sotto @ darlan-alves ha una buona soluzione con:

Se vuoi chiamare la funzione senza form puoi usare la mia direttiva 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 :

 

Invio altre fantastiche direttive sul mio twitter e sul mio account gist .

Se hai solo un input puoi usare il tag form.

 

Se si dispone di più di un input o non si desidera utilizzare il tag del modulo o si desidera colbind la funzionalità di chiave di accesso a un campo specifico, è ansible collegarlo a un input specifico come segue:

  

Volevo qualcosa di più estensibile / semantico rispetto alle risposte date, quindi ho scritto una direttiva che accetta un object javascript in modo simile al ngClass :

HTML

  

I valori dell’object sono valutati nel contesto dell’ambito della direttiva – assicurarsi che siano racchiusi tra virgolette singole altrimenti tutte le funzioni saranno eseguite quando la direttiva viene caricata (!)

Ad esempio: esc : 'clear()' invece di 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]); }); } }); }; }]); 

Un altro approccio sarebbe usare ng-keypress,

  

Invia un input premendo Invio con AngularJS – jsfiddle

Direttiva molto buona, pulita e semplice con shift + invio supporto:

 app.directive('enterSubmit', function () { return { restrict: '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); } } }); } } }); 

Se vuoi anche la convalida dei dati

  
...

L’importante aggiunta qui è $loginForm.$valid che convaliderà il modulo prima dell’esecuzione della funzione. Dovrai aggiungere altri attributi per la convalida che vanno oltre lo scopo di questa domanda.

In bocca al lupo.

Volevo solo sottolineare che nel caso di un pulsante di invio nascosto, puoi semplicemente usare la direttiva ngShow e impostarla su false in questo modo:

HTML

 

Usa ng-submit e avvolgi entrambi gli input in tag separati:

 
/>

/>

Il wrapping di ciascun campo di input nel proprio tag di forma consente a INVIO di richiamare l’invio su uno dei due moduli. Se si utilizza un tag modulo per entrambi, è necessario includere un pulsante di invio.

Sarà leggermente più ordinato usando una class CSS invece di ripetere gli stili in linea.

CSS

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

HTML

 

FWIW – Ecco una direttiva che ho usato per un modale bootstrap di conferma / avviso base, senza la necessità di un

(basta cambiare l’azione click jQuery per quello che vuoi e aggiungere data-easy-dismiss al tuo tag modal)

 app.directive('easyDismiss', function() { return { restrict: '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); }); } }; });