Update value in input field when changing using angular

Question

I have two input types: "range" and "number". If I change the number using the input field, the value is updated in the header and at the range slide. However, I also would like to update the value in my input field, if I change it using the range slide. Right now, only the value in the header is updated.

HTML

<div ng-app>
<div ng-controller="amountController">
     <h2>{{"Amount: " + amount + "$"}}</h2>
    <div class="row">
        <div class="item range" id="index3-rangeAmount"> <i>5000$</i>
            <input type="range" name="volume" min="5000" max="50000" value="{{amount}}" ng-model="amount"> <i>50000$</i>
        </div>
        <div>
            <input type="number" id="index3-inputAmount" min="5000" max="50000" value="{{getAmount()}}" ng-model="amount">
        </div>
    </div>
</div>

Javascript

function amountController ($scope) {
$scope.amount = 7500;
$scope.getAmount = function() {
    return $scope.amount;
};

}

Here is the link to the jsfiddle: jsfiddle

Kevin Simple · Accepted Answer · 2015-11-20 11:43:16Z

4

mate,it's to do with the input type, as your input is number type, but the value you bind is text type, so you can use watch to fix this, have create a fiddle for you, check this:

function MyCont($scope) {
$scope.value = 0;

$scope.$watch('value',function(val,old){
   $scope.value = parseInt(val); 
});
};

http://jsfiddle.net/2e15u0bm/

answered Nov 20, 2015 at 11:43

Kevin Simple

1,21311 silver badges22 bronze badges

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

Comments

Michael · Accepted Answer · 2015-11-20 12:43:45Z

1

Angular doesn't yet support `input type="range".

There is a fix, which will handle range the same as number. It is marked to be fixed in version 1.5-Cadidate. Anyway the issue is open already for quiet a long time. Hope the fix makes it into the next release.

answered Nov 20, 2015 at 12:43

Michael

3,1141 gold badge19 silver badges17 bronze badges

Comments

Ben Kauer · Accepted Answer · 2015-11-20 11:52:32Z

0

Instead of registering a watcher like Kevin Simple suggested, you could register an on-change (ng-change) method for the input type range like

$scope.valueChanged = function() {
    $scope.amount = parseInt($scope.amount);
}

which will be called by ng-change="valueChanged()":

<input type="range" ng-change="valueChanged()" name="volume" min="5000" max="50000" value="{{amount}}" ng-model="amount"> <i>50000$</i>

Working Fiddle

answered Nov 20, 2015 at 11:52

Ben Kauer

5963 silver badges11 bronze badges

Collectives™ on Stack Overflow

Update value in input field when changing using angular

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related