将两个输入绑定到同一模型

Question

正如在这个plunker中所展示的,我想要一个<input type ="number"/> <input type ="range"/>,它们既可以更新相同的$scope变量,也可以互相更新.

现在,当我更新一个输入时,$ scope变量被更改,但另一个范围的值被消隐.我只需要使用data-ng-model绑定一个并在另一个上使用data-ng-change吗？有更清洁的解决方案吗？

Answer 1

这是我将要引用的示例.问题是范围是字符串值,而数字是数字值.

在控制器中实例化变量并编写处理转换的函数

$scope.data = 10;

$scope.setDataAsNumber = function() {
  $scope.data = parseInt($scope.data, 10);
}

创建绑定到的所有元素 $scope.data

<input type="text" ng-model="data" ng-change="setDataAsNumber()">
<br>
<input type="number" ng-model="data">
<br>
<input type="range" ng-model="data" ng-change="setDataAsNumber()">
<br>
{{ data }}

我用ng-change指令解决了这个问题.