Отправить форму по нажатию Enter с AngularJS

Если вы хотите вызвать функцию без формы, вы можете использовать мою директиву 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>

Я представляю другие удивительные директивы на мой твиттер и мой gist account.

Если у вас есть только один ввод, вы можете использовать тег формы.

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

Если у вас несколько входных данных или вы не хотите использовать тег формы или хотите добавить функциональные возможности ввода в определенное поле, вы можете вставить его на конкретный вход следующим образом:

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

Я хотел что-то немного более расширяемое/семантическое, чем заданные ответы, поэтому я написал директиву, которая принимает объект javascript аналогично встроенному ngClass:

HTML

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

Значения объекта оцениваются в контексте области действия - убедитесь, что они заключены в одинарные кавычки, иначе все функции будут выполняться при загрузке директивы (!)

Итак, например: esc : 'clear()' вместо 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]);
                    });
                }
            });
        };
    }]);

Очень хорошая, чистая и простая директива с поддержкой shift + enter:

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

Другим подходом будет использование ng-keypress,

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

Отправить ввод при нажатии Enter с помощью AngularJS - jsfiddle

Если вы хотите проверить достоверность данных

<!-- 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>

Важным дополнением здесь является $loginForm.$valid, который будет проверять форму перед выполнением функции. Вам придется добавить другие атрибуты для проверки, которые выходят за рамки этого вопроса.

Удачи.

Просто хотел указать, что в случае наличия скрытой кнопки отправки вы можете просто использовать директиву ngShow и установить ее как false:

HTML

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

Используйте ng-submit и просто оберните оба входа в теги отдельной формы:

<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>

Обтекание каждого поля ввода в его собственном теге формы позволяет ENTER для вызова submit в любой форме. Если вы используете один тег формы для обоих, вам нужно будет добавить кнопку отправки.

FWIW - вот директива, которую я использовал для базового подтверждения/оповещения для бутстрапа, без необходимости в <form>

(просто отключите действие click для jQuery для всех, что вам нравится, и добавьте data-easy-dismiss в ваш модальный тег)

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

Будет немного более аккуратным, используя класс CSS вместо повторения встроенных стилей.

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>