AngularJS - Pause binding of input field while focused

Question

I have a data object that looks like this:

$scope.data = { value1: 'anyValue', value2: 'anyValue'};

This data object will be updated via polling every second.

In the view I'm showing the data in input fields like:

<input type="number" ng-model="data.value1"/>
<input type="number" ng-model="data.value2"/>

The user should be able to focus one of the input fields and enter a value. Now this is not possible, because every change that is made in the field will be overwritten, when the data object gets updated.

I don't want to pause the whole polling process, because the other input field should still show its updated value.

What is the best way to pause only the binding of the focused input field, while it is focused?

Angular 1.3 seems to provide a solution for this already: [link](http://stackoverflow.com/questions/11868393/angularjs-inputtext-ngchange-fires-while-the-value-is-changing) use `` — kvDennis, May 20 '15 at 14:01
Because of the polling the data gets still updated, so if you type something in it would be overwritten every second. But it works like yarons said. — john89er, May 21 '15 at 16:15

score 1 · Accepted Answer · answered May 20 '15 at 07:42

I suggest you do the following:

<input type="number" ng-model="data.value1" ng-focus="onFocus('value1')" ng-blur="onBlur('value1')"/>
<input type="number" ng-model="data.value2" ng-focus="onFocus('value2')" ng-blur="onBlur('value2')"/>

In your controller, something like:

$scope.onFocus = function(key) {        
    $scope.preventChange = key;
}; 

$scope.onBlur = function(key) {        
    $scope.preventChange = null;
};

And then whenever you do your polling and updating, check if the data key you are trying to update is the one in $scope.preventChange, and if so - don't change it.

AngularJS - Pause binding of input field while focused

1 Answers1