javascript - 使用 Angular 更改时更新输入字段中的值

Question

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

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

伙计，这与输入类型有关，因为你的输入是数字类型，但你绑定(bind)的值是文本类型，所以你可以使用 watch 来解决这个问题，为你创建一个 fiddle ，检查这个:

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

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

http://jsfiddle.net/2e15u0bm/