AngularJS istifadə edərək Enter düyməsini basdığınızda bir forma göndərin

Bu xüsusi vəziyyətdə, Girişə basarkən bu girişləri bir funksiya çağırmaq üçün hansı parametrləri etmək məcburiyyətindəyəm?

 // 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'); }; }]) 
332
14 марта '13 в 21:16 2013-03-14 21:16 ali 14 mart '13 saat 21:16 'də təyin olunub 2013-03-14 21:16
@ 11 cavab

Bucaq qutusu onu qutudan çıxarır. NgSubmitni forma elementində sınamışdınız ?

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

EDIT: Göndərmə düyməsinə aid şərhlər üçün bir həll təqdim edən təqdimat düyməsini vermədən bir düyməni basaraq bir formun təqdim edilməsinə baxın:

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

Gizli təqdim etmə düyməsini həll etməsəniz, nəzarətçi funksiyasını əsas mətbuatla daxil edin və ya açar düyməsini basın. Bu, adətən, xüsusi bir direktiv tələb edir, lakin AngularUI kitabxanası artıq əla klaviatura həllini yaratmışdır. Http://angular-ui.github.com/ səhifəsinə baxın

AngularUI lib əlavə etdikdən sonra kodunuz belə bir şeyə bənzəyir:

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

ya da hər bir fərdi sahəyə giriş düyməsini bağlaya bilərsiniz.

Sadə bir keypres direktivi yaratmaq üçün bu SO suallara da baxın: AngularJS-də onKeyUp-ı necə təsbit edə bilərəm?

EDIT (2014-08-28): Bu cavabı yazma zamanı ng-keypress / ng-keyup / ng-keydown AngularJS-də doğma direktivlər kimi yox idi. Aşağıdakı şərhlərdə @ darlan-alves olduqca yaxşı bir həll var:

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

486
14 марта '13 в 22:05 2013-03-14 22:05 cavab 14 mart 2013 -cü il saat 10 : 05- da eterps tərəfindən verilir. 2013-03-14 22:05

Bir forma olmadan funksiyanı zəng etmək istəyirsinizsə, mənim ngEnter direktivindən istifadə edə bilərsiniz:

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(); } }); }; }); 
border=0

HTML :

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

Mən twitter və mənim hesabım üçün digər zəhmli direktivləri təqdim edirəm .

271
28 июня '13 в 15:25 2013-06-28 15:25 Cavab EpokK tərəfindən 28 İyun 2013 tarixində saat 15:25 'də verilir. 2013-06-28 15:25

Yalnız bir girişiniz varsa, forma etiketi istifadə edə bilərsiniz.

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

Birdən çox girişiniz varsa və ya bir forma etiketini istifadə etmək istəmirsinizsə və ya müəyyən bir sahəyə giriş funksiyası əlavə etmək istəyirsinizsə, onu aşağıdakı kimi xüsusi bir girişə yapışdıra bilərsiniz:

 <input ng-keyup="$event.keyCode == 13  myFunc()" ...> 
173
03 февр. Cavab Goblortikus tərəfindən verilir 03 fevral. 2014-02-03 21:34 '14 at 21:34 2014-02-03 21:34

Verilən cavablardan bir qədər daha genişlənən / semantik bir şey istəmişəm, belə ki, daxili ngClass kimi javascript obyektini qəbul edən bir direktiv ngClass :

HTML

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

Nümunə dəyərləri əhatə kontekstində qiymətləndirilir - bunların tək tırnaqlara əlavə olunduğundan əmin olun, əks halda bütün funksiyalar direktiv yükləndikdə (!)

Beləliklə, məsələn: esc : 'clear()' yerine 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]); }); } }); }; }]); 
28
19 февр. Cavab 19 fevralda AlexFoxGill tərəfindən verilir 2014-02-19 16:35 '14 16:35 2014-02-19 16:35

Shift ilə çox gözəl, təmiz və sadə yönergeler + dəstəkləyin:

 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); } } }); } } }); 
14
02 февр. Cavab Vlatko verildi 02 fevral. 2015-02-02 23:52 '15 at 23:52 2015-02-02 23:52

Başqa bir yanaşma ng-presspress-dan istifadə etmək olar,

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

Açar düyməsini basıldığında giriş göndərin. AngularJS - jsfiddle istifadə edin

13
21 окт. Partha Roy tərəfindən verilmiş cavab 21 oktyabr 2016-10-21 08:18 '16 'da 8:18 ' də 2016-10-21 08:18 'də

Verileri doğrulamak istəsəniz

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

Burada vacib bir əlavə $loginForm.$valid , funksiyanı yerinə $loginForm.$valid əvvəl formu doğruldur. Doğrulama üçün digər suallara əlavə etmək lazımdır.

Uğurlar.

5
29 июня '16 в 5:28 2016-06-29 05:28 cavab 29 iyun 'da 5:28' də Akaş tərəfindən veriləcək

Mən yalnız bir gizli təqdimat düyməsini varsa, sadəcə ngShow direktivindən istifadə edərək yalana qura bilərsiniz:

HTML

 <form ng-submit="myFunc()"> <input type="text" name="username"> <input type="submit" value="submit" ng-show="false"> </form> 
2
06 авг. Cavab verildi landesko 06 Aug 2016-08-06 00:43 '16 'da 0:43' da 2016-08-06 00:43

Ng-submit istifadə edin və hər iki girişdən ayrı bir formanın etiketlərində sadəcə olaraq:

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

Hər bir giriş sahəsini öz forması etiketinə yığmaq ENTER'u hər hansı forma təqdim etməyə çağırır. Hər ikisi üçün bir forma etiketi istifadə etsəniz, təqdimat düyməsini əlavə etmək lazımdır.

1
18 нояб. Cavab 18 noyabr tarixində Mylamlam tərəfindən verilmişdir. 2014-11-18 08:25 '14 saat 8:25 'də 2014-11-18 08:25

FWIW, <form> ehtiyacına ehtiyac olmadan bootstrap üçün əsas təsdiq / xəbərdarlıq üçün istifadə olunan direktivdir

(yalnız istədiyiniz jQuery üçün klik əməliyyatı aradan buraxın və data-easy-dismiss modal etiketinizə atın)

 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); }); } }; }); 
0
25 мая '17 в 22:28 2017-05-25 22:28 cavab 25 may 17-də 10:28 2017-05-05 22:28 tarixində Andrew Appleby tərəfindən verilir

Daxil olan üslubları təkrarlamaq yerinə CSS sinifini istifadə edərək bir az daha dəqiq olacaq.

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> 
0
17 авг. Cavab verilir 17 av. 2014-08-17 13:38 '14 da 13:38 2014-08-17 13:38