在这个特殊的情况下，我有什么选项，使这些输入调用函数时，我按下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');
};
}])
当前回答
您可以简单地将@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+版本
其他回答
只是想指出，在有一个隐藏提交按钮的情况下，你可以使用ngShow指令并将其设置为false，如下所示:
HTML
<form ng-submit="myFunc()">
<input type="text" name="username">
<input type="submit" value="submit" ng-show="false">
</form>
使用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>
FWIW -这是一个我用于基本确认/警报引导模式的指令，不需要<form>
(只需切换出jQuery的点击动作，无论你喜欢什么，并添加data-easy-dismiss到你的模式标签)
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);
});
}
};
});
非常好，干净和简单的指令与shift +进入支持:
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);
}
}
});
}
}
});
您可以简单地将@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+版本
