使用角度更改时更新输入字段中的值答案

【问题标题】：Update value in input field when changing using angular使用角度更改时更新输入字段中的值
【发布时间】：2016-02-22 21:10:17
【问题描述】：

我有两种输入类型：“范围”和“数字”。如果我使用输入字段更改数字，则该值会在标题和范围幻灯片中更新。但是，如果我使用范围幻灯片更改它，我也想更新我的输入字段中的值。现在，只更新了标头中的值。

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;
};

}

这里是 jsfiddle 的链接：jsfiddle

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

mate，和输入类型有关，因为你的输入是数字类型，但是你绑定的值是文本类型，所以你可以用watch来解决这个问题，已经为你创建了一个fiddle，检查这个：

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

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

http://jsfiddle.net/2e15u0bm/

【讨论】：

【解决方案2】：

您可以为输入类型范围注册一个 on-change (ng-change) 方法，而不是像 Kevin Simple 建议的那样注册观察者

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

将被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

【讨论】：

【解决方案3】：

Angular 还不支持 `input type="range"。

有一个fix，它将处理range 与number 相同。它在版本 1.5-Cadidate 中被标记为已修复。无论如何，这个问题已经公开了很长时间。希望该修复程序使其进入下一个版本。

【讨论】：