Comment utiliser un événement de frappe sur AngularJS?

Je veux attraper l’événement de saisie de la touche entrée dans la zone de texte ci-dessous. Pour que ce soit plus clair, j’utilise un ng-repeat pour remplir le tbody. Voici le HTML:

  

Ceci est mon module:

 angular.module('components', ['ngResource']); 

J’utilise une ressource pour remplir la table et mon code de contrôleur est:

 function Ajaxy($scope, $resource) { //controller which has resource to populate the table } 

Vous devez append une directive , comme ceci:

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 :

 

Une alternative consiste à utiliser la directive standard ng-keypress="myFunct($event)"

Ensuite, dans votre contrôleur, vous pouvez avoir:

 ... $scope.myFunct = function(keyEvent) { if (keyEvent.which === 13) alert('I am an alert'); } ... 

Mon approche la plus simple consiste simplement à utiliser la directive angular intégrée:

ng-keypress , ng-keydown ou ng-keyup .

Généralement, nous souhaitons append un support clavier pour quelque chose qui a déjà été géré par ng-click.

par exemple:

 action 

Maintenant, ajoutons le support du clavier.

déclencher par la touche entrée:

 action 

par la clé de l’espace:

 action 

par espace ou entrer la clé:

 action 

si vous êtes dans un navigateur moderne

 action 

En savoir plus sur keyCode:
keyCode est obsolète mais l’API bien supscope, vous pouvez utiliser $ evevt.key dans le navigateur supporté.
Voir plus dans https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

Une autre alternative simple:

  

Et l’alternative ng-ui:

  

Voici ce que j’ai compris en construisant une application avec une exigence similaire, elle ne nécessite pas d’écrire une directive et il est relativement simple de dire ce qu’elle fait:

  

Vous pouvez utiliser ng-keydown = “myFunction ($ event)” comme atsortingbut.

  myFunction(event) { if(event.keyCode == 13) { // '13' is the key code for enter // do what you want to do when 'enter' is pressed :) } } 

html

  

controller.js

 $scope.keyPressed = function (keyEvent) { if (keyEvent.keyCode == 13) { alert('presiono enter'); console.log('presiono enter'); } }; 

En essayant

 ng-keypress="console.log($event)" ng-keypress="alert(123)" 

n’a rien fait pour moi.

Strangley l’exemple à https://docs.angularjs.org/api/ng/directive/ngKeypress , qui fait ng-keypress = “count = count + 1”, fonctionne.

J’ai trouvé une autre solution, qui a appuyé sur Entrée pour appeler le ng-click du bouton.

   

Vous pouvez également l’appliquer à un contrôleur sur un élément parent. Cet exemple peut être utilisé pour mettre en évidence une ligne dans un tableau en appuyant sur les touches fléchées haut / bas.

 app.controller('tableCtrl', [ '$scope', '$element', function($scope, $element) { $scope.index = 0; // row index $scope.data = []; // array of items $scope.keypress = function(offset) { console.log('keypress', offset); var i = $scope.index + offset; if (i < 0) { i = $scope.data.length - 1; } if (i >= $scope.data.length) { i = 0; } }; $element.bind("keydown keypress", function (event) { console.log('keypress', event, event.which); if(event.which === 38) { // up $scope.keypress(-1); } else if (event.which === 40) { // down $scope.keypress(1); } else { return; } event.preventDefault(); }); }]); 
{{key}}
{{value}}

Ceci est une extension de la réponse d’EpokK.

J’ai eu le même problème d’avoir à appeler une fonction de scope lorsque l’entrée est enfoncée dans un champ de saisie. Cependant, je voulais également transmettre la valeur du champ d’entrée à la fonction spécifiée. Ceci est ma solution:

 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(); } }); }; 

})

L’utilisation en HTML est la suivante:

  

Bravo à EpokK pour sa réponse.

Et ça?:

 

Maintenant, lorsque vous appuyez sur la touche Entrée après avoir écrit quelque chose dans votre saisie, le formulaire sait comment le gérer.

     
Informe your name:

{{resposta}}

Un exemple de code que j’ai fait pour mon projet. Fondamentalement, vous ajoutez des balises à votre entité. Imaginez que vous ayez du texte saisi, lorsque vous entrez le nom du tag, vous obtenez un menu déroulant avec des balises préchargées parmi lesquelles choisir, vous naviguez avec des flèches et sélectionnez avec Entrée:

HTML + AngularJS v1.2.0-rc.3

   

Controller.js

 $scope.preloadTags = function () { var newTag = $scope.newTag; if (newTag && newTag.sortingm()) { newTag = newTag.sortingm().toLowerCase(); $http( { method: 'GET', url: 'api/tag/gettags', dataType: 'json', contentType: 'application/json', mimeType: 'application/json', params: {'term': newTag} } ) .success(function (result) { $scope.preloadedTags = result; $scope.preloadedTagsIndex = -1; } ) .error(function (data, status, headers, config) { } ); } else { $scope.preloadedTags = {}; $scope.preloadedTagsIndex = -1; } }; function checkIndex(index) { if (index > $scope.preloadedTags.length - 1) { return 0; } if (index < 0) { return $scope.preloadedTags.length - 1; } return index; } function removeAllActiveTags() { for (var x = 0; x < $scope.preloadedTags.length; x++) { if ($scope.preloadedTags[x].activeTag) { $scope.preloadedTags[x].activeTag = false; } } } $scope.navigateTags = function ($event) { if (!$scope.newTag || $scope.preloadedTags.length == 0) { return; } if ($event.keyCode == 40) { // down removeAllActiveTags(); $scope.preloadedTagsIndex = checkIndex($scope.preloadedTagsIndex + 1); $scope.preloadedTags[$scope.preloadedTagsIndex].activeTag = true; } else if ($event.keyCode == 38) { // up removeAllActiveTags(); $scope.preloadedTagsIndex = checkIndex($scope.preloadedTagsIndex - 1); $scope.preloadedTags[$scope.preloadedTagsIndex].activeTag = true; } else if ($event.keyCode == 13) { // enter removeAllActiveTags(); $scope.selectTag($scope.preloadedTags[$scope.preloadedTagsIndex]); } }; $scope.selectTag = function (preloadedTag) { $scope.addTag(preloadedTag.label); }; 

CSS + Bootstrap v2.3.2

 .preloadedTagPanel { background-color: #FFFFFF; display: block; min-width: 250px; max-width: 700px; border: 1px solid #666666; padding-top: 0; border-radius: 0; } .preloadedTagItemPanel { background-color: #FFFFFF; border-bottom: 1px solid #666666; cursor: pointer; } .preloadedTagItemPanel:hover { background-color: #666666; } .preloadedTagItemPanelActive { background-color: #666666; } .preloadedTagItem { display: inline-block; text-decoration: none; margin-left: 5px; margin-right: 5px; padding-top: 5px; padding-bottom: 5px; padding-left: 20px; padding-right: 10px; color: #666666 !important; font-size: 11px; } .preloadedTagItem:hover { background-color: #666666; } .preloadedTagItemActive { background-color: #666666; color: #FFFFFF !important; } .dropdown .preloadedTagItemPanel:last-child { border-bottom: 0; } 

Je suis un peu en retard .. mais j’ai trouvé une solution plus simple en utilisant auto-focus . Cela pourrait être utile pour les boutons ou autres lors de l’ouverture d’une dialog :

Cela devrait aller si vous voulez appuyer sur le bouton Espace ou Entrer des clics.

voici ma directive:

 mainApp.directive('number', function () { return { link: function (scope, el, attr) { el.bind("keydown keypress", function (event) { //ignore all characters that are not numbers, except backspace, delete, left arrow and right arrow if ((event.keyCode < 48 || event.keyCode > 57) && event.keyCode != 8 && event.keyCode != 46 && event.keyCode != 37 && event.keyCode != 39) { event.preventDefault(); } }); } }; }); 

usage:

  

Vous pouvez utiliser ng-keydown, ng-keyup, ng-press tel que celui-ci.

sortingger une fonction:

   

ou si vous avez un condion, par exemple lorsqu’il appuie sur Échap (27 est le code clé de l’évasion)

  
....

Je pense que l’utilisation de document.bind est un peu plus élégante

 constructor($scope, $document) { var that = this; $document.bind("keydown", function(event) { $scope.$apply(function(){ that.handleKeyDown(event); }); }); } 

Pour obtenir le document au constructeur du contrôleur:

 controller: ['$scope', '$document', MyCtrl] 

Que diriez-vous juste