Question

我想使用AngularJs同时更改范围和输入框，但收到此错误：＆＃34; http://errors.angularjs.org/1.3.11/ngModel/numfmt?p0=0.6＆＃34;

我认为原因是使用字符串而不是数值更新模型的范围，但这并不能让我更接近解决方案。

<html ng-app="app">
    <div ng-controller="controller">
        <input type="number" min="0" max="1" step="0.1" ng-model="value" />
        <input type="range" min="0" max="1" step="0.1" ng-model="value"/>
    </div>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<script>
    var app = angular.module('app', []);
    app.controller('controller', function($scope) {
        $scope.value = 0.5;
});
</script>

如何在没有错误的情况下更改输入框上应用的范围？

注意：显而易见的解决方案是将输入框的类型更改为＆＃34; text＆＃34;，但我不想在那里允许非数字值。

Answer 1

您可以使用parseFloat：

<!doctype html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.js"></script>
    </head>
    <body ng-app="boltlandApp">
        <div ng-controller="controller">
            <input type="number" min="0" max="1" step="0.1" ng-model="value" />
            <input type="range" min="0" max="1" step="0.1" ng-model="range"/>
        </div>
    </body>
    <script>
    var app = angular.module('boltlandApp', []);
    app.controller('controller', function($scope) {
        $scope.value = 0.5;
        $scope.range = 0.5;
        $scope.$watch('range', function (newVal, oldVal) {
            $scope.value = parseFloat(newVal);
        });
        $scope.$watch('value', function (newVal, oldVal) {
            $scope.range = newVal;
        });
    });
    </script>
</html>

Answer 2

似乎是一个错误： https://github.com/angular/angular.js/issues/5892

解决方法是：

$scope.$watch('value', function() {
    $scope.value = parseFloat($scope.value);
});

angularJs - 更新范围和数字输入同时失败

2 个答案: