我想捕捉下面文本框上的回车键事件。为了更清楚地说明这一点，我使用ng-repeat填充tbody。下面是HTML:
<td><input type="number" id="closeqty{{$index}}" class="pagination-right closefield"
data-ng-model="closeqtymodel" data-ng-change="change($index)" required placeholder="{{item.closeMeasure}}" /></td>
这是我的模块:
angular.module('components', ['ngResource']);
我使用一个资源来填充表，我的控制器代码是:
function Ajaxy($scope, $resource) {
//controller which has resource to populate the table
}
当前回答
这是对EpokK答案的扩展。
我有同样的问题，必须调用一个作用域函数时，enter被推到一个输入字段。但是，我还想将输入字段的值传递给指定的函数。这是我的解决方案:
app.directive('ltaEnter', function () {
return function (scope, element, attrs) {
element.bind("keydown keypress", function (event) {
if(event.which === 13) {
// Create closure with proper command
var fn = function(command) {
var cmd = command;
return function() {
scope.$eval(cmd);
};
}(attrs.ltaEnter.replace('()', '("'+ event.target.value +'")' ));
// Apply function
scope.$apply(fn);
event.preventDefault();
}
});
};
});
在HTML中的用法如下:
<input type="text" name="itemname" lta-enter="add()" placeholder="Add item"/>
向EpokK的回答致敬。
其他回答
我认为使用文档。Bind更优雅一些
constructor($scope, $document) {
var that = this;
$document.bind("keydown", function(event) {
$scope.$apply(function(){
that.handleKeyDown(event);
});
});
}
获取文档到控制器构造函数:
controller: ['$scope', '$document', MyCtrl]
另一个简单的选择:
<input ng-model="edItem" type="text"
ng-keypress="($event.which === 13)?foo(edItem):0"/>
ng-ui的替代品:
<input ng-model="edItem" type="text" ui-keypress="{'enter':'foo(edItem)'}"/>
我最简单的方法是使用angular内置指令:
ngk, ngk或ngke是的。
通常，我们希望为已经由ng-click处理的内容添加键盘支持。
例如:
<a ng-click="action()">action</a>
现在，让我们添加键盘支持。
由回车键触发:
<a ng-click="action()"
ng-keydown="$event.keyCode === 13 && action()">action</a>
空格键:
<a ng-click="action()"
ng-keydown="$event.keyCode === 32 && action()">action</a>
空格或输入键:
<a ng-click="action()"
ng-keydown="($event.keyCode === 13 || $event.keyCode === 32) && action()">action</a>
如果你使用的是现代浏览器
<a ng-click="action()"
ng-keydown="[13, 32].includes($event.keyCode) && action()">action</a>
关于keyCode的更多信息: keyCode已弃用，但支持良好的API，你可以使用$ eventt。请输入受支持的浏览器。 详见https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
另一种方法是使用标准指令ng-keypress="myFunct($event)"
然后在你的控制器中你可以有:
...
$scope.myFunct = function(keyEvent) {
if (keyEvent.which === 13)
alert('I am an alert');
}
...
所有你需要做的事情是获得事件如下:
console.log(angular.element(event.which));
指令可以做到这一点，但你不能这样做。
