在这个特殊的情况下，我有什么选项，使这些输入调用函数时，我按下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');
};
}])
当前回答
Angular提供了开箱即用的支持。你在表单元素上尝试过ngSubmit吗?
<form ng-submit="myFunc()" ng-controller="mycontroller">
<input type="text" ng-model="name" />
<br />
<input type="text" ng-model="email" />
</form>
编辑:根据关于提交按钮的评论，请参阅通过按enter不提交按钮提交表单，其中给出了解决方案:
<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
如果您不喜欢隐藏的提交按钮解决方案，则需要将控制器函数绑定到Enter keypress或keyup事件。这通常需要一个自定义指令，但AngularUI库已经设置了一个很好的按键解决方案。参见http://angular-ui.github.com/
添加angularUI库后，你的代码会像这样:
<form ui-keypress="{13:'myFunc($event)'}">
... input fields ...
</form>
或者您可以将回车键绑定到每个单独的字段。
另外，请参阅创建简单keypres指令的SO问题: 如何在AngularJS中检测onKeyUp ?
编辑(2014-08-28):在写这个答案的时候，ng-keypress/ng-keyup/ng-keydown还不存在于AngularJS中。在下面的评论中@darlan-alves有一个很好的解决方案:
<输入ng -keyup = " $事件。==地理==根据美国人口普查，这个县的总面积为，其中土地和(0.991平方公里)水。/>
其他回答
使用CSS类而不是重复内联样式会稍微整洁一些。
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>
如果你也想要数据验证
<!-- 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>
这里重要的添加是$loginForm。$valid将在执行函数之前验证表单。您必须为验证添加其他属性，这超出了这个问题的范围。
祝你好运。
您可以简单地将@Hostlistener与组件绑定，其余的将由它负责。它不需要从HTML模板中绑定任何方法。
@HostListener('keydown',['$event'])
onkeydown(event:keyboardEvent){
if(event.key == 'Enter'){
// TODO do something here
// form.submit() OR API hit for any http method
}
}
上面的代码应该适用于Angular 1+版本
Angular提供了开箱即用的支持。你在表单元素上尝试过ngSubmit吗?
<form ng-submit="myFunc()" ng-controller="mycontroller">
<input type="text" ng-model="name" />
<br />
<input type="text" ng-model="email" />
</form>
编辑:根据关于提交按钮的评论，请参阅通过按enter不提交按钮提交表单，其中给出了解决方案:
<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
如果您不喜欢隐藏的提交按钮解决方案，则需要将控制器函数绑定到Enter keypress或keyup事件。这通常需要一个自定义指令，但AngularUI库已经设置了一个很好的按键解决方案。参见http://angular-ui.github.com/
添加angularUI库后，你的代码会像这样:
<form ui-keypress="{13:'myFunc($event)'}">
... input fields ...
</form>
或者您可以将回车键绑定到每个单独的字段。
另外，请参阅创建简单keypres指令的SO问题: 如何在AngularJS中检测onKeyUp ?
编辑(2014-08-28):在写这个答案的时候，ng-keypress/ng-keyup/ng-keydown还不存在于AngularJS中。在下面的评论中@darlan-alves有一个很好的解决方案:
<输入ng -keyup = " $事件。==地理==根据美国人口普查，这个县的总面积为，其中土地和(0.991平方公里)水。/>
如果你想调用函数没有形式，你可以使用我的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>
我在我的twitter和gist账户上提交了其他很棒的指令。
