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

Answer 1

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

Answer 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)" />

AngularJS: ng-keypress is not working

Question

2 answers

solution1
2 ACCPTED 2014-09-29 19:27:12

solution2
2 2014-09-29 19:57:35

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

AngularJS: ng-keypress is not working

Question

2 answers

solution1 2 ACCPTED 2014-09-29 19:27:12

solution2 2 2014-09-29 19:57:35

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

solution1
2 ACCPTED 2014-09-29 19:27:12

solution2
2 2014-09-29 19:57:35