在这个特殊的情况下，我有什么选项，使这些输入调用函数时，我按下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');
};
}])
当前回答
另一个方法是使用ng-keypress，
<input type="text" ng-model="data" ng-keypress="($event.charCode==13)? myfunc() : return">
用AngularJS - jsfiddle按Enter键提交输入
其他回答
另一个方法是使用ng-keypress，
<input type="text" ng-model="data" ng-keypress="($event.charCode==13)? myfunc() : return">
用AngularJS - jsfiddle按Enter键提交输入
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);
});
}
};
});
我想要一些比给出的答案更可扩展/语义的东西，所以我写了一个指令，以类似于内置ngClass的方式接受javascript对象:
HTML
<input key-bind="{ enter: 'go()', esc: 'clear()' }" type="text"></input>
对象的值在指令作用域的上下文中计算——确保它们被括在单引号中，否则所有函数都将在加载指令时执行(!)
例如: Esc: 'clear()'而不是Esc: clear()
Javascript
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]);
});
}
});
};
}]);
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平方公里)水。/>
只是想指出，在有一个隐藏提交按钮的情况下，你可以使用ngShow指令并将其设置为false，如下所示:
HTML
<form ng-submit="myFunc()">
<input type="text" name="username">
<input type="submit" value="submit" ng-show="false">
</form>
