Enviar formulario al presionar Entrar con AngularJS

En este caso particular, ¿qué opciones tengo para hacer estas entradas llamar a una función cuando presiono Enter?

// 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 lo admite de fábrica. ¿Has probado ngSubmit en tu elemento de formulario?

     

    EDITAR: según el comentario sobre el botón Enviar, vea Enviar un formulario presionando Entrar sin un botón de enviar, que brinda la solución de:

      

    Si no te gusta la solución de botón de envío oculto, deberás vincular una función de controlador al evento Introducir tecla o tecla. Esto normalmente requiere una directiva personalizada, pero la biblioteca AngularUI ya tiene una buena solución de keypress. Ver http://angular-ui.github.com/

    Después de agregar angularUI lib, su código sería algo así como:

     
    ... input fields ...

    o puede vincular la tecla Enter a cada campo individual.

    Además, consulte estas preguntas sobre SO para crear una directiva de tecla simple: ¿Cómo puedo detectar onKeyUp en AngularJS?

    EDITAR (2014-08-28): En el momento en que se escribió esta respuesta, ng-keypress / ng-keyup / ng-keydown no existía como directivas nativas en AngularJS. En los comentarios a continuación @ darlan-alves tiene una solución bastante buena con:

    Si desea llamar a la función sin formulario, puede usar mi directiva 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 :

     

    Presento otras directivas increíbles en mi cuenta de twitter y mi cuenta principal .

    Si solo tiene una entrada, puede usar la etiqueta de formulario.

     

    Si tiene más de una entrada, o no desea usar la etiqueta de formulario, o desea adjuntar la funcionalidad de clave de entrada a un campo específico, puede alinearla con una entrada específica de la siguiente manera:

      

    Quería algo un poco más ampliable / semántico que las respuestas dadas, así que escribí una directiva que toma un objeto javascript de forma similar a la ngClass :

    HTML

      

    Los valores del objeto se evalúan en el contexto del scope de la directiva: asegúrese de que estén encerrados en comillas simples; de lo contrario, todas las funciones se ejecutarán cuando se cargue la directiva (!)

    Entonces, por ejemplo: esc : 'clear()' lugar 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]); }); } }); }; }]); 

    Otro enfoque sería usar ng-keypress,

      

    Enviar una entrada al presionar Enter con AngularJS – jsfiddle

    Muy buena, limpia y simple directiva con shift + enter support:

     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); } } }); } } }); 

    Si también quieres validación de datos

      
    ...

    La adición importante aquí es $loginForm.$valid que validará el formulario antes de ejecutar la función. Deberá agregar otros atributos para la validación que están más allá del scope de esta pregunta.

    Buena suerte.

    Solo quería señalar que en el caso de tener un botón de envío oculto, solo puede usar la directiva ngShow y configurarlo en falso así:

    HTML

     

    Use ng-submit y simplemente ajuste ambas entradas en tags de formulario separadas:

     
    />

    />

    Envolver cada campo de entrada en su propia etiqueta de formulario permite a ENTER invocar enviar en cualquier formulario. Si usa una etiqueta de formulario para ambos, deberá incluir un botón de envío.

    Será un poco más limpio usando una clase de CSS en lugar de repetir estilos en línea.

    CSS

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

    HTML

     

    FWIW – Aquí hay una directiva que he usado para un modo básico de arranque de confirmación / alerta, sin la necesidad de un

    (simplemente cambie la acción de clic de jQuery para lo que quiera y agregue data-easy-dismiss a su etiqueta 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); }); } }; });