CODEWITHSUNDEEP
angularjs
john89er
john89er

Reputation: 53

AngularJS - Pause binding of input field while focused

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?

Upvotes: 2

Views: 365

Answers (1)

Yaron Schwimmer
Yaron Schwimmer

Reputation: 5357

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.

Upvotes: 1

Related Questions