提交表单上pressing与AngularJS进入 [英] Submit form on pressing Enter with AngularJS

问题描述

在这种特殊情况下，做什么选择我必须让这些输入调用一个函数，当我preSS输入？

  // HTML视图//
＆LT;形式为GT;
    ＆LT;输入类型=文本NG模型=名和LT;！ -  preSS ENTER并呼吁myFunc的 - ＆GT; /＆GT;
    ＆LT; BR /＆GT;
    ＆LT;输入类型=文本NG模型=电子邮件＆LT;！ -  preSS ENTER并呼吁myFunc的 - ＆GT; /＆GT;
＆LT; /表及GT;// //控制器
.controller（'myController的'，['$范围'，函数（$范围）{
    $ scope.name ='';
    $ scope.email ='';
    //当pressing ENTER功能被称为
    $ scope.myFunc =功能（）{
       警报（'提交'）;
    };
}]）
 

解决方案

角度支持这一开箱。您是否尝试过 ngSubmit 表单元素？

 ＆LT;形式NG提交=myFunc的（）NG控制器=myController的＆GT;
   ＆LT;输入类型=文本NG模型=名/＆GT;
    ＆LT; BR /＆GT;
    ＆LT;输入类型=文本NG模型=电子邮件/＆GT;
＆LT; /表及GT;
 

编辑：每对提交按钮的评论，见<一href=\"http://stackoverflow.com/questions/477691/submitting-a-form-by-$p$pssing-enter-without-a-submit-button\">Submitting由pressing形式没有一个提交按钮它给出了解决方案请输入：

 ＆LT;输入类型=提交风格=的位置是：绝对的;左：-9999px;宽度：1px的;身高：1px的;/＆GT;
 

如果你不喜欢隐藏的提交按钮的解决方案，你需要绑定一个控制器功能的确认键preSS或keyup事件。这通常需要自定义的指令，但AngularUI库有一个很好的关键preSS的解决方案设置了。请参见 http://angular-ui.github.com/

添加angularUI lib目录后，您的code会是这样的：

 ＆LT;表单UI键preSS ={13：'myFunc的（$事件）'}＆GT;
  ...输入字段...
＆LT; /表及GT;
 

或者你可以绑定回车键preSS到每一个人场。

此外，请参阅创建一个简单的键preS指令该SO问题：
我怎样才能在AngularJS检测的onkeyup？

编辑（2014年8月28日）：在这个答案撰写时，吴键preSS / NG-KEYUP / NG-的keydown不存在在AngularJS原生指令。在下面@达尔朗 - 阿尔维斯的评论有一个pretty很好的解决方案：

＆LT;输入NG-KEYUP =$ event.key code == 13安培;＆安培; myFunc的（）... /＆GT;

In this particular case, what options do I have to make these inputs call a function when I press 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 supports this out of the box. Have you tried ngSubmit on your form element?

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

EDIT: Per the comment regarding the submit button, see Submitting a form by pressing enter without a submit button which gives the solution of:

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

If you don't like the hidden submit button solution, you'll need to bind a controller function to the Enter keypress or keyup event. This normally requires a custom directive, but the AngularUI library has a nice keypress solution set up already. See http://angular-ui.github.com/

After adding the angularUI lib, your code would be something like:

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

or you can bind the enter keypress to each individual field.

Also, see this SO questions for creating a simple keypres directive: How can I detect onKeyUp in AngularJS?

EDIT (2014-08-28): At the time this answer was written, ng-keypress/ng-keyup/ng-keydown did not exist as native directives in AngularJS. In the comments below @darlan-alves has a pretty good solution with:

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

这篇关于提交表单上pressing与AngularJS进入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！