Question

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

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

Answer 1

配合，它与输入类型有关，因为你的输入是数字类型，但你绑定的值是文本类型，所以你可以使用watch来解决这个问题，为你创建一个小提琴，检查一下：

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

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

http://jsfiddle.net/2e15u0bm/

Answer 2

Angular尚不支持`input type =“range”。

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

Answer 3

您可以为输入类型范围注册更改（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 个答案: