AngularJs Ng-Keypress event working wrongly?

Question

I am developing an application in Angularjs. I am using ng-keypress event in input type=text. While typing value in text I'm getting wrong values in the keypress function. For example, the first time if I type "1" I am getting undefined. Second time, typing any other value gives the first value

<input ng-model="NodeId_1" type="text" ng-keypress="getValue()"/>

 var angularapp = angular.module('nameapp', []);

    angularapp.controller('NameCtrl', function ($scope) {
        $scope.getValue = function () {
            alert($scope.NodeId_1);//Here first time undefined is coming and second what ever we enter first value will come
        }
    }
 )

Answer 1

You'll want to use ng-keyup instead.

ng-keypress happens as the key is pressed, and BEFORE the value populates the input. This is why you're not getting any value on the first keypress, but on subsequent presses you will.

Use ng-keyup and your problem is solved, as it happens once the value has already populated the input.

<input ng-model="NodeId_1" type="text" ng-keyup="getValue()" />

ng-keypress is working as intended, but it is not the directive applicable to your requirements.

Working plunkr: http://plnkr.co/edit/OHWDZo68siDlcrXnLyzJ?p=preview

Answer 2

The keypress event is fired when a key is pressed down and that key normally produces a character value (use input instead). https://developer.mozilla.org/en-US/docs/Web/Events/keypress

So neither the input field value nor the scope value(apply/digest loop etc.) will reflect the expected input value.

Solution is depending on your requirements. Here are some:

1) Use another event on the inputfield: change, keyup, ...

2) Use the $event object in your listener method:

<input ng-model="NodeId_1" type="text" ng-keypress="getValue($event)"/>

$scope.getValue = function (event) {
    console.log(event)
}

3) Create a watcher for your NodeId_1 value within your scope:

$scope.$watch('NodeId_1', function(newVal) {
    ...
});