AngularJS: ng-keypress is not working

Question

Problem: ng-keypress is not working but if I replace ng-keypress with ng-click then filterSearchData($event) function is working.

HTML:-

<!DOCTYPE html>
<html ng-app="myApp">
    <head lang="en">
        <meta charset="utf-8">
        <title>Custom Plunker</title>  
        <link rel="stylesheet" type="text/css" href="ng-grid.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script src="jquery.min.js"></script>
        <script src="angular.min.js"></script>
        <script type="text/javascript" src="ng-grid.debug.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body>
        <body ng-controller="MyCtrl">
            <input type="text" ng-keypress="filterSearchData($event)" />
            <div class="gridStyle" ng-grid="gridOptions"></div>
        </body>
    </body>
</html>

JS:-

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope, $http) {
    $scope.filterSearchData = function(element) {
        console.log(element);
    };
});

What version of Angular are you using? I don't believe it's always been supported — Ian
– Ian, Commented Sep 29, 2014 at 19:30

Dennis Traub · Accepted Answer · 2014-09-29 19:32:47Z

2

In this case I recommend to use ng-change instead of ng-keypress.

// HTML:
<input type="text" ng-model="filter" ng-change="filterSearchData()" />

// Controller:
app.controller('MyCtrl', function($scope, $http) {
    $scope.filterSearchData = function() {
        console.log($scope.filter);
    };
});

edited Sep 29, 2014 at 19:32

answered Sep 29, 2014 at 19:27

Dennis Traub

51.9k7 gold badges100 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dfsq · Accepted Answer · 2014-09-29 19:57:35Z

2

If for some reason you have to use such an old version of angular, which doesn't support ngKeypress directive, you can always add your own implementation. It's pretty easy to do, for example onKeypress directive:

app.directive('onKeypress', function() {
    return {
        scope: {
            handler: '&onKeypress'
        },
        link: function(scope, element) {
            element.bind('keypress', function(e) {
                scope.handler({$event: e});
            });
        }
    };
});

HTML:

<input type="text" on-keypress="filterSearchData($event)" />

Demo: http://plnkr.co/edit/OorXMYKZeXI9Lrc1wrRY?p=preview

answered Sep 29, 2014 at 19:57

dfsq

193k26 gold badges244 silver badges261 bronze badges

Collectives™ on Stack Overflow

AngularJS: ng-keypress is not working

2 Answers 2

Comments

Demo: http://plnkr.co/edit/OorXMYKZeXI9Lrc1wrRY?p=preview

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Demo: http://plnkr.co/edit/OorXMYKZeXI9Lrc1wrRY?p=preview

Comments

Your Answer

Sign up or log in

Post as a guest

Related