angularjs - 使用 AngularJS 按 Enter 键提交表单

Question

在这种特殊情况下，当我按 Enter 时，我必须有哪些选项才能使这些输入调用函数？

HTML:

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

Answer 1

Angular 开箱即用地支持这一点。你尝试过ngSubmit在你的表单元素上？

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

编辑:根据有关提交按钮的评论，请参阅 Submitting a form by pressing enter without a submit button这给出了解决方案:

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

如果您不喜欢隐藏的提交按钮解决方案，则需要将 Controller 函数绑定(bind)到 Enter 按键或 keyup 事件。这通常需要自定义指令，但 AngularUI 库已经设置了一个很好的按键解决方案。请参阅http://angular-ui.github.com/

添加 angularUI 库后，您的代码将类似于:

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

或者您可以将 Enter 按键绑定(bind)到每个单独的字段。

此外，请参阅创建简单 keypres 指令的 SO 问题: How can I detect onKeyUp in AngularJS?

编辑(2014-08-28):在撰写此答案时，ng-keypress/ng-keyup/ng-keydown 在 AngularJS 中并不作为 native 指令存在。在下面的评论中 @darlan-alves 有一个非常好的解决方案:

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