Comment utiliser un événement keypress dans angularjs

Question

Je veux attraper l'événement de presse de clé d'entrée sur la zone de texte ci-dessous ... pour le rendre plus clair j'emploie un ng-repeat pour peupler le tbody .. voici le 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>
 

c'est mon module ..

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

J'utilise la ressource pour peupler la table et mon code de contrôleur est ...

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

s'il y a plus d'informations nécessaires s'il vous plaît commenter ... merci d'avance

Answer 1

Vous devez ajouter un directive , comme ceci:

Javascript :

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

HTML :

 <div ng-app="" ng-controller="MainCtrl">
    <input type="text" ng-enter="doSomething()">    
</div>
 

Je soumets d'autres directives impressionnantes sur mon compte Twitter et mon compte Gist .

Answer 2

Je sais que je suis en retard.

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('Im a lert');
}
 

Answer 3

Une autre alternative simple:

 <input ng-model="edItem" type="text" 
    ng-keypress="($event.which === 13)?foo(edItem):0"/>
 

Et l'alternative ng-ui:

 <input ng-model="edItem" type="text" ui-keypress="{'enter':'foo(edItem)'}"/>
 

Answer 4

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


<table class="table table-striped" ng-controller="tableCtrl">
<thead>
    <tr>
        <th ng-repeat="(key, value) in data[0]">{{key}}</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="row in data track by $index" ng-click="draw($index)" ng-class="$index == index ? 'info' : ''">
        <td ng-repeat="(key, value) in row">{{value}}</td>
    </tr>
</tbody>
</table>
 

Answer 5

En essayant

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

n'a rien fait pour moi.

Strangley l'échantillon à https://docs.angularjs.org/api/ng/directive/ngKeypress , qui fait ng-keypress = "count = count + 1", fonctionne.

J'ai trouvé une solution alternative, qui a appuyer sur Entrée invoque le ng-clic du bouton.

 <input ng-model="..." onkeypress="if (event.which==13) document.getElementById('button').click()"/>
<button id="button" ng-click="doSomething()">Done</button>