¿Cómo utilizar un evento de pulsación de tecla en AngularJS?
Quiero capturar el evento de presionar la tecla Intro en el cuadro de texto a continuación. Para que quede más claro, estoy usando a ng-repeatpara completar el tbody. Aquí está el 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>
Este es mi módulo:
angular.module('components', ['ngResource']);
Estoy usando un recurso para completar la tabla y mi código de controlador es:
function Ajaxy($scope, $resource) {
//controller which has resource to populate the table
}
Necesitas agregar un directive, como este:
JavaScript :
app.directive('myEnter', function () {
return function (scope, element, attrs) {
element.bind("keydown keypress", function (event) {
if(event.which === 13) {
scope.$apply(function (){
scope.$eval(attrs.myEnter);
});
event.preventDefault();
}
});
};
});
HTML :
<div ng-app="" ng-controller="MainCtrl">
<input type="text" my-enter="doSomething()">
</div>
Una alternativa es utilizar la directiva estándar.ng-keypress="myFunct($event)"
Luego en tu controlador puedes tener:
...
$scope.myFunct = function(keyEvent) {
if (keyEvent.which === 13)
alert('I am an alert');
}
...
Mi enfoque más simple usando solo una directiva incorporada angular:
ng-keypress, ng-keydowno ng-keyup.
Por lo general, queremos agregar soporte de teclado para algo que ya se maneja con ng-click.
por ejemplo:
<a ng-click="action()">action</a>
Ahora, agreguemos soporte para teclado.
activar con la tecla Intro:
<a ng-click="action()"
ng-keydown="$event.keyCode === 13 && action()">action</a>
por tecla de espacio:
<a ng-click="action()"
ng-keydown="$event.keyCode === 32 && action()">action</a>
por espacio o tecla enter:
<a ng-click="action()"
ng-keydown="($event.keyCode === 13 || $event.keyCode === 32) && action()">action</a>
si estás en un navegador moderno
<a ng-click="action()"
ng-keydown="[13, 32].includes($event.keyCode) && action()">action</a>
Más información sobre keyCode:
keyCode está obsoleto pero es una API bien compatible; en su lugar, puede usar $evevt.key en un navegador compatible.
Ver más en https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
Otra alternativa sencilla:
<input ng-model="edItem" type="text"
ng-keypress="($event.which === 13)?foo(edItem):0"/>
Y la alternativa ng-ui:
<input ng-model="edItem" type="text" ui-keypress="{'enter':'foo(edItem)'}"/>
