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 use <input type="number" ng-model="data.value1" ng-model-options="{ updateOn: 'blur' }" ng-keyup="cancel($event)" /> — kvDennis
– kvDennis, Commented May 20, 2015 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
– john89er, Commented May 21, 2015 at 16:15

Yaron Schwimmer · Accepted Answer · 2015-05-20 07:42:00Z

1

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.

answered May 20, 2015 at 7:42

Yaron Schwimmer

5,3675 gold badges40 silver badges60 bronze badges

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

Collectives™ on Stack Overflow

AngularJS - Pause binding of input field while focused

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related