Envíe el formulario al presionar Enter con AngularJS

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

// HTML view //
<form>
    <input type="text" ng-model="name" <!-- Press ENTER and call myFunc --> />
    <br />
    <input type="text" ng-model="email" <!-- Press ENTER and call myFunc --> />
</form>

// Controller //
.controller('mycontroller', ['$scope',function($scope) {
    $scope.name = '';
    $scope.email = '';
    // Function to be called when pressing ENTER
    $scope.myFunc = function() {
       alert('Submitted');
    };
}])

Angular es compatible con esto fuera de la caja. ¿Has probado ngSubmit en tu elemento de formulario?

<form ng-submit="myFunc()" ng-controller="mycontroller">
   <input type="text" ng-model="name" />
    <br />
    <input type="text" ng-model="email" />
</form>

EDITAR: según el comentario sobre el botón de envío, vea Enviar un formulario presionando enter sin un botón de envío que da la solución de:

<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>

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

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

<form ui-keypress="{13:'myFunc($event)'}">
  ... input fields ...
</form>

o puede vincular la pulsación de tecla enter a cada campo individual.

Además, vea estas preguntas SO para crear una directiva simple de keypres: ¿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:

<input ng-keyup="$event.keyCode == 13 && myFunc()"... />

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 :

<div ng-app="" ng-controller="MainCtrl">
    <input type="text" ng-enter="doSomething()">    
</div>

Presento otras directivas impresionantes en mi cuenta de Twitter y Gist .

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

<form ng-submit="myFunc()" ...>

Si tiene más de una entrada, o no desea usar la etiqueta del formulario, o si desea adjuntar la funcionalidad de la tecla Intro a un campo específico, puede incorporarlo a una entrada específica de la siguiente manera:

<input ng-keyup="$event.keyCode == 13 && myFunc()" ...>

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

HTML

<input key-bind="{ enter: 'go()', esc: 'clear()' }" type="text"></input>

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

Así por ejemplo: esc : 'clear()' lugar deesc : 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,

<input type="text" ng-model="data" ng-keypress="($event.charCode==13)? myfunc() : return"> 

Envíe 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 quieres validación de datos también

<!-- form -->
<form name="loginForm">
...
  <input type="email" ng-keyup="$loginForm.$valid && $event.keyCode == 13 && signIn()" ng-model="email"... />
  <input type="password" ng-keyup="$loginForm.$valid && $event.keyCode == 13 && signIn()" ng-model="password"... />
</form>

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

Buena suerte.

Solo quería señalar que en el caso de tener un botón de envío oculto, puede usar la directiva ngShow y configurarla como falsa de esta manera:

HTML

<form ng-submit="myFunc()">
    <input type="text" name="username">
    <input type="submit" value="submit" ng-show="false">
</form>

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

<div ng-controller="mycontroller">

  <form ng-submit="myFunc()">
    <input type="text" ng-model="name" <!-- Press ENTER and call myFunc --> />
  </form>

  <br />

  <form ng-submit="myFunc()">
    <input type="text" ng-model="email" <!-- Press ENTER and call myFunc --> />
  </form>

</div>

Ajustar cada campo de entrada en su propia etiqueta de formulario permite que ENTER invoque el envío en cualquiera de los formularios. Si usa una etiqueta de formulario para ambos, deberá incluir un botón de envío.

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

CSS

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

HTML

<form ng-submit="myFunc()">
    <input type="text" ng-model="name" />
    <br />
    <input type="text" ng-model="email" />
    <input type="submit" />
</form>

FWIW: aquí hay una directiva que he usado para un modo de arranque básico de confirmación / alerta, sin la necesidad de un <form>

(solo cambie la acción de clic de jQuery para lo que quiera y agréguelo data-easy-dismissa 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);
            });
        }
    };
});