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

Binding input type range on input number with AngularJS 1.2

本文关键字：输入 类型 范围 编号 使用 绑定 AngularJS      更新时间：2023-09-26

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

所以我找到了这个解决方法，它与 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/

任何解决方案？

好吧，我找到了一个解决方法：观察范围并强制它返回 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);
    });

我不得不"简单"创建一个对象$watch因为它似乎不适用于普通变量......无论如何，这完成了工作，所以我想这对我来说没关系。

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

例如 
<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;
};

这是您第一次尝试修改输入数字的替代方法：
（使用 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;
                });
            }
        }
    };
});

这会使用 type="range" 修改所有输入元素，以便它们将浮点值写入模型 - 或者如果转换出错 - 不更改模型值。

相关文章：