AngularJS : Function only updates variable in view after an event happens

Question

I have a simple input field :

<input id = 'input' ng-model="addMe">

that is connected to a script :

<script>
    document.getElementById('input').onkeydown = function(event) {
        if (event.keyCode == 13) {
                angular.element(document.getElementById('input')).scope().addItem();
        }
   }
</script>

that is there so that whenever the user presses enter in the input field; the addItem function in AngularJS that adds the string from the input field into an array is called.

    $scope.addItem = function () {
        found = false;
        if (!$scope.addMe) return $scope.errorText = "Please Specify an Item";
        else {
            angular.forEach($scope.Products, function(value, key) {
                if (value.name.toUpperCase() == $scope.addMe.toUpperCase()){
                    $scope.cart_items.push({name : value.name, price : value.price});
                    $scope.grandTotal += value.price;
                    $scope.addMe = '';
                    $scope.errorText = '';
                    found = true;
                }
            });
            if(!found){$scope.errorText = "Item does not exist";}
        }
    }

note that cart_items, and products are arrays (not directly related to the problem)

The Function addItem is called when i press enter, passing the correct variables; but the variables like errorText, grandTotal, and also the data that is supposed to be pushed into the array cart_items, only updates when i press another key, or click.

i know the function is doing what it's supposed to do; because i used console.log to debug.

probably of problem of digest

Groben
– Groben

2017-04-07 09:50:21 +00:00
Commented Apr 7, 2017 at 9:50 — Groben
– Groben, Commented Apr 7, 2017 at 9:50

Stephane Janicaud · Accepted Answer · 2017-04-10 05:59:37Z

1

Here is a sample code, change text field value, press Enter and look at the console output.

angular.module('app', []);

angular.module('app')
.controller('ExampleController', ['$scope', function($scope) {

	$scope.fieldValue = "Hello";

	$scope.keydown = function(event) {
		if(event.key === 'Enter') {
			$scope.addItem((event.srcElement || event.target).value);
		}
	}

	 $scope.addItem = function (value) {
        // do something
        console.log('Add item with value', value);
    }

}]);

<!doctype html>

<html lang="en" ng-app="app">
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="ExampleController">

<input type="text" ng-model="fieldValue" ng-keydown="keydown($event)">

</body>
</html>

Here is also a plunker with the code above

edited Apr 10, 2017 at 5:59

answered Apr 7, 2017 at 10:05

Stephane Janicaud

3,7051 gold badge16 silver badges21 bronze badges

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

4 Comments

Kevin fu Over a year ago

the sample code you gave me above, returns an error every time i press enter. but your usage of "ng-keydown" in the input element; fixed my problem. as I used it as an alternative to my own js "keydown" function. i suggest editing the answer, so i could accept it as an answer.

Stephane Janicaud Over a year ago

Do you mean you've got an error when you click Run code snippet ? That's weird but I've also added a Plunker with the same code if you wan't. Tried with IE, Chrome and Firefox without any problem. Just open browser console in Plunker to show the result ;)

Kevin fu Over a year ago

yes. it show's an error when i click on "Run Code Snippet", in plunker it still shows "Error: event.srcElement is undefined" in the console whenever i press enter.

Stephane Janicaud Over a year ago

Ok sorry this is because you're using Firefox which does not understand event.srcElement but event.target. Snippet and Plunker updated ;)

Collectives™ on Stack Overflow

AngularJS : Function only updates variable in view after an event happens

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related