Prześlij formularz po naciśnięciu Enter za pomocą AngularJS

W tym konkretnym przypadku, jakie opcje muszę wprowadzić, aby te wejścia wywoływały funkcję po naciśnięciu klawisza 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 obsługuje to po wyjęciu z pudełka. Próbowałeś już ngSubmit na swoim formularzu?

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

EDYCJA: Zgodnie z komentarzem dotyczącym przycisku wysyłania , patrz Przesyłanie formularza przez naciśnięcie Enter bez przycisku wysyłania, co daje rozwiązanie:

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

Jeśli nie podoba Ci się rozwiązanie ukrytego przycisku przesyłania, musisz powiązać funkcję kontrolera ze zdarzeniem Enter lub naciśnięciem klawisza. Zwykle wymaga to niestandardowej dyrektywy, ale biblioteka AngularUI ma już skonfigurowane ładne naciśnięcie klawisza. Zobacz http://angular-ui.github.com/

Po dodaniu biblioteki angularUI lib kod będzie wyglądał następująco:

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

lub możesz przypisać klawisz Enter do każdego pola.

Zobacz także następujące pytania SO dotyczące tworzenia prostej dyrektywy keypres: Jak wykryć onKeyUp w AngularJS?

EDYCJA (2014-08-28): W momencie pisania tej odpowiedzi ng-keypress / ng-keyup / ng-keydown nie istniały jako natywne dyrektywy w AngularJS. W komentarzach poniżej @ darlan-alves ma całkiem dobre rozwiązanie z:

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

Jeśli chcesz wywołać funkcję bez formularza, możesz użyć mojej dyrektywy 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>

Przekazuję inne niesamowite dyrektywy na moim Twitterze i koncie GIST .

Jeśli masz tylko jedno wejście, możesz użyć znacznika formularza.

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

Jeśli masz więcej niż jedno wejście lub nie chcesz używać znacznika formularza, lub chcesz dołączyć funkcję enter-key do określonego pola, możesz wstawić je do określonego wejścia w następujący sposób:

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

Chciałem czegoś bardziej rozszerzalnego / semantycznego niż podane odpowiedzi, więc napisałem dyrektywę, która pobiera obiekt javascript w podobny sposób do wbudowanego ngClass:

HTML

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

Wartości obiektu są oceniane w kontekście zakresu dyrektywy - upewnij się, że są ujęte w pojedyncze cudzysłowy, w przeciwnym razie wszystkie funkcje zostaną wykonane po załadowaniu dyrektywy (!)

Na przykład: esc : 'clear()'zamiastesc : 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]);
                    });
                }
            });
        };
    }]);

Innym podejściem byłoby użycie klawisza ng,

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

Prześlij dane po naciśnięciu Enter za pomocą AngularJS - jsfiddle

Bardzo dobra, czysta i prosta dyrektywa z obsługą 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);
                       }
                 }
            });
        }
    }
});

Jeśli chcesz także sprawdzania poprawności danych

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

Ważnym dodatkiem jest tutaj, $loginForm.$validktóry zweryfikuje formularz przed wykonaniem funkcji. Będziesz musiał dodać inne atrybuty do weryfikacji, które wykraczają poza zakres tego pytania.

Powodzenia.

Chciałem tylko zaznaczyć, że w przypadku posiadania ukrytego przycisku wysyłania możesz po prostu użyć dyrektywy ngShow i ustawić ją na false:

HTML

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

Użyj ng-upload i po prostu zawiń oba dane wejściowe w osobnych tagach formularza:

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

Zawinięcie każdego pola wejściowego we własnym znaczniku formularza pozwala ENTER na wywołanie przedłożenia w dowolnym formularzu. Jeśli użyjesz jednego tagu formularza dla obu, musisz dołączyć przycisk przesyłania.

Będzie nieco łatwiejsza przy użyciu klasy CSS zamiast powtarzania stylów wbudowanych.

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 - Oto dyrektywa, której użyłem dla podstawowego modalu bootstrap potwierdzenia / alertu, bez potrzeby <form>

(po prostu wyłącz akcję kliknięcia jQuery dla tego, co chcesz i dodaj data-easy-dismissdo tagu modalnego)

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