javascript - Angular Material 输入编号更改格式

Question

在我的 Angular Material 应用程序中，我有一个验证字段:

<input type="number" ng-model="myValue"
       name="myValue" 
       min="0" max="100" 
       ng-pattern="/^[0-9]\d*(\.\d+)?$/" required>

它工作正常。但现在我需要让它允许用户输入 .75 而不是 0.75

所以问题是如何应用我的过滤器:

if( myValue.substring(0,1) == "." ){
    myValue = "0" + myValue;
}

在 Angular Material ng-pattern 和type="number" 验证之前

Answer 1

您可以使用 $filter、$formatters 和 $parsers 编写一些指令:

app.directive('parser', ['$filter',
    function($filter) {
        return {
            restrict:'A',
            require: 'ngModel',
            link: function(scope, element, attrs, ctrl) {

                ctrl.$formatters.unshift(function (a) {
                return $filter('myFilter')(ctrl.$modelValue)
            });

             ctrl.$parsers.unshift(function (viewValue) {
             element[0].value = $filter('myFilter')(element[0].value);
             return element[0].value;
            });
            }
        };
    }
]);

app.filter('myFilter', [
    function() {
        return function(input) {

           if( input && input.substring(0,1) == "." ){
             input = "0" + input;
           }
            return input;
        };
    }
]);

DEMO Plunkr

---

但是你不能使用 number 类型，因为我记得 . 不受支持并且不会解析为整数

希望它能给你指明方向