AngularJS ile Enter tuşuna basıldığında formu gönder

Bu özel durumda, Enter tuşuna bastığımda bu girişlerin bir işlevi çağırmasını sağlamak için hangi seçeneklere ihtiyacım var?

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

Açısal bunu kutudan çıkarır. Form öğenizde ngSubmit'i denediniz mi?

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

DÜZENLEME: Gönderme düğmesi ile ilgili yorum başına, aşağıdaki öğelerin çözümünü sunan bir gönderme düğmesi olmadan enter tuşuna basarak form gönderme sayfasına bakın :

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

Gizli gönderme düğmesi çözümünü beğenmezseniz, Enter tuşuna basın veya keyup olayına bir denetleyici işlevi bağlamanız gerekir. Bu normalde özel bir yönerge gerektirir, ancak AngularUI kütüphanesi önceden kurulmuş hoş bir tuşa basma çözümüne sahiptir. Bkz. Http://angular-ui.github.com/

AngularUI lib'sini ekledikten sonra, kodunuz şöyle bir şey olacaktır:

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

veya enter tuşa basmayı her bir alana bağlayabilirsiniz.

Ayrıca, basit bir keypres yönergesi oluşturmak için şu SO sorularına bakın: AngularJS'de onKeyUp'ı nasıl tespit edebilirim?

DÜZENLEME (2014-08-28): Bu yanıt yazıldığı sırada AngularJS'de ng-keypress / ng-keyup / ng-keydown yerel yönergeler olarak mevcut değildi. Aşağıdaki yorumlarda @ darlan-alves ile oldukça iyi bir çözüm var:

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

Fonksiyonu form olmadan çağırmak istiyorsanız, ngEnter yönergesimi kullanabilirsiniz:

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>

Twitter ve gist hesabım hakkında başkalarına harika direktifler sunuyorum .

Yalnızca bir girişiniz varsa form etiketini kullanabilirsiniz.

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

Birden fazla girişiniz varsa veya form etiketini kullanmak istemiyorsanız veya enter-key işlevini belirli bir alana eklemek istiyorsanız, girişi aşağıdaki gibi belirli bir girişe satır içine alabilirsiniz:

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

Verilen cevaplardan biraz daha genişletilebilir / anlamsal bir şey istedim, böylece yerleşik bir javascript nesnesini benzer bir şekilde alan bir yönerge yazdım ngClass:

HTML

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

Nesnenin değerleri direktifin kapsamı bağlamında değerlendirilir - tek tırnak içine alındıklarından emin olun aksi halde direktif yüklendiğinde tüm fonksiyonlar yürütülür (!)

Örneğin: esc : 'clear()'yerineesc : 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]);
                    });
                }
            });
        };
    }]);

Başka bir yaklaşım ng-keypress kullanmak,

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

AngularJS ile Enter tuşuna basarken bir girdi gönderme - jsfiddle

Shift + enter desteği ile çok iyi, temiz ve basit bir direktif:

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

Veri doğrulamasını da istiyorsanız

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

Buradaki önemli ekleme, $loginForm.$validişlevi çalıştırmadan önce formu doğrulayacaktır. Doğrulama için bu sorunun kapsamı dışında başka özellikler eklemeniz gerekecektir.

İyi şanslar.

Gizli bir gönderme düğmesi olması durumunda ngShow yönergesini kullanabileceğinizi ve şu şekilde false olarak ayarlayabileceğinizi belirtmek istedim:

HTML

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

Ng-gönder kullanın ve her iki girişi de ayrı form etiketlerine sarın:

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

Her girdi alanını kendi form etiketinde sarmalamak ENTER komutunun her iki formda da gönderilmesini sağlar. Her ikisi için de bir form etiketi kullanırsanız, bir gönderme düğmesi eklemeniz gerekir.

Satır içi stilleri tekrarlamak yerine bir CSS sınıfı kullanarak biraz daha temiz olacak.

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 - İşte temel bir onaylama / uyarı önyükleme yöntemi için kullandığım, <form>

(İstediğiniz şey için jQuery tıklama işlemini devre dışı bırakın ve data-easy-dismisskalıcı etiketinize ekleyin )

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