Question

我面临一个奇怪的问题：我试图用输入数字绑定输入范围。我知道输入范围返回字符串和输入数字只允许数字作为值。

所以我发现这个解决方法可以很好地使用AngularJS 1.1但不能使用1.2 ...值为空。

app.directive('input', function () {
    return {
        restrict: 'E',
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {
            if (attrs.type.toLowerCase() !== 'number') {
                return;
            } //only augment number input!
            ctrl.$formatters.push(function (value) {
                return value ? parseFloat(value) : null;
            });
        }
    };
});

http://jsfiddle.net/SanderElias/qb44R/

任何解决方案？

Answer 1

我找到了一个解决方法：观察范围并强制它返回int。

    $scope.easy = {quantite:0,patient:0,quantite_new:0};
    $scope.$watch('easy.patient', function() {
        console.log($scope.easy.patient);
        $scope.easy.patient  = parseInt($scope.easy.patient);
    });

我必须创建一个对象＆＃34; easy＆＃34;因为$ watch似乎不适用于正常变量...无论如何，这样做的工作让我觉得它对我来说没问题。

Answer 2

这就是我做到的，它对我有用。我们可以使用 ng-change 并附加事件处理程序来同步相对滑块和输入类型编号的值。 e.g

<input type="range" ng-model="slider.value" ng-change="sliderToNumber()"
min="0" max="100" step="1" />

<input type="number" ng-model="inputNum.value"
ng-change="numberToSlider()" min="0" max='100' />

和像这样的控制器

$scope.sliderToNumber = function() {

    $scope.inputNum.value = parseInt($scope.slider.value);
};

$scope.numberToSlider = function() {

    $scope.slider.value = $scope.slider.value;
};

Answer 3

这是您第一次尝试修改输入数字的替代方法：
（用Angularjs 1.4.4测试）

app.directive('input', function () {
    return {
        restrict: 'E',
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {
            if (attrs.type.toLowerCase() === 'range') {
                // change output of range to number.
                ctrl.$parsers.push(function (value) {
                    var valueAsFloat = parseFloat(value);
                    var returnValue;
                    if (isFinite(valueAsFloat)) {
                        returnValue = valueAsFloat;
                    } else {
                        // don't change model
                        returnValue = ctrl.$modelValue;
                    }
                    return returnValue;
                });
            }
        }
    };
});

这会修改所有输入元素，类型为＆＃34; range＆＃34;这样他们就可以为模型写一个浮点值 - 或者如果转换出错 - 不要改变模型值。

使用AngularJS 1.2绑定输入编号的输入类型范围

3 个答案: