在这种特殊情况下,当我按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');
};
}])
答案 0 :(得分:512)
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;"/>
如果您不喜欢隐藏的提交按钮解决方案,则需要将控制器功能绑定到Enter按键或键盘事件。这通常需要一个自定义指令,但AngularUI库已经设置了一个很好的keypress解决方案。见http://angular-ui.github.com/
添加angularUI lib后,您的代码将类似于:
<form ui-keypress="{13:'myFunc($event)'}">
... input fields ...
</form>
或者您可以将Enter按键绑定到每个单独的字段。
另外,请参阅此SO问题以创建简单的keypres指令: How can I detect onKeyUp in AngularJS?
EDIT(2014-08-28):在撰写本答案时,ng-keypress / ng-keyup / ng-keydown在AngularJS中不作为本机指令存在。在下面的评论中,@ darlan-alves有一个非常好的解决方案:
<input ng-keyup="$event.keyCode == 13 && myFunc()"... />
答案 1 :(得分:282)
如果你想在没有表格的情况下调用函数,你可以使用我的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>
我在my twitter和我的gist account上提交了其他令人敬畏的指示。
答案 2 :(得分:192)
如果您只有一个输入,则可以使用表单标记。
<form ng-submit="myFunc()" ...>
如果您有多个输入,或者不想使用表单标记,或者想要将回车键功能附加到特定字段,则可以按如下方式将其内联到特定输入:
<input ng-keyup="$event.keyCode == 13 && myFunc()" ...>
答案 3 :(得分:33)
我想要比给定答案更具扩展性/语义性的东西,所以我写了一个指令,它以与内置ngClass
类似的方式获取javascript对象:
<input key-bind="{ enter: 'go()', esc: 'clear()' }" type="text"></input>
在指令范围的上下文中评估对象的值 - 确保它们被单引号括起来,否则在加载指令时将执行所有函数(!)
所以例如:
esc : 'clear()'
代替esc : clear()
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]);
});
}
});
};
}]);
答案 4 :(得分:23)
另一种方法是使用ng-keypress,
<input type="text" ng-model="data" ng-keypress="($event.charCode==13)? myfunc() : return">
答案 5 :(得分:14)
使用shift + enter support支持非常好,干净且简单的指令:
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);
}
}
});
}
}
});
答案 6 :(得分:5)
如果您还想要数据验证
<!-- 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
,它将在执行函数之前验证表单。您将不得不为验证添加其他属性,这超出了本问题的范围。
祝你好运。
答案 7 :(得分:2)
只是想指出,如果有一个隐藏的提交按钮,你可以使用ngShow指令并将其设置为false,如下所示:
<强> HTML 强>
<form ng-submit="myFunc()">
<input type="text" name="username">
<input type="submit" value="submit" ng-show="false">
</form>
答案 8 :(得分:1)
使用ng-submit并将两个输入包装在单独的表单标记中:
<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>
将每个输入字段包装在自己的表单标记中允许ENTER在任一表单上调用提交。如果您为两者使用一个表单标记,则必须包含一个提交按钮。
答案 9 :(得分:0)
使用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>
答案 10 :(得分:0)
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);
});
}
};
});
答案 11 :(得分:0)
您可以简单地将@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+版本一起使用