Question

在一个角度应用程序中我需要将一个范围变量绑定到一个浮动用户输入。

<my-float ng-model="myValue" name="floatValue"></my-float>
<button type="button" ng-disable="myValue.$invalid">Submit</submit>

用户应该能够插入十进制数字，以逗号或点分隔，最多两位小数。 html输入应该只显示允许的字符，忽略第二个十进制数字后的所有内容。

测试

0 - ＆gt;好的 - ＆gt; myValue = 0
0.1或0,1 - ＆gt;好的 - ＆gt; myValue = 0.1
0.12或0,12 - >好的 - ＆gt; model = 0.12
12 - ＆gt;好的 - ＆gt; myValue = 12
12.3或12,3 - ＆gt;好的myValue = 12.3

12.34或12,34 - ＆gt;好的myValue = 12.34

此代码解决了我的问题：

app.directive("myFloat",['$filter',function($filter){
    var FLOAT_REGEXP = /^\-?\d+((\.|\,)\d+)?$/;
    return {
       require: 'ngModel',
       link: function(scope, elm, attrs, ctrl) {
            ctrl.$formatters.unshift(function(viewValue){
            if (FLOAT_REGEXP.test(viewValue))
            {
                ctrl.$setValidity('float', true);
                var vv = getNewViewValue(viewValue);
                var floatValue = parseFloat(vv);
                ctrl.$setViewValue(vv);
                ctrl.$render();
                return $filter('truncate')(floatValue);
            }
            else{
               ctrl.$setValidity('float', false);
            }
            return viewValue;
        });

        var getNewViewValue = function(vv){
            var str = (vv +'').replace(",",".");
            var splitted = str.split(".");

            if(splitted[1] && splitted[1].length > 2){
               splitted[1] = splitted[1].substring(0,2);
               return splitted[0]+'.'+ splitted[1];
            }
            return vv;
        };

        ctrl.$parsers.unshift(function(viewValue) {
            if (FLOAT_REGEXP.test(viewValue))
            {
                ctrl.$setValidity('float', true);
                var vv = getNewViewValue(viewValue);
                var floatValue = parseFloat(vv);
                ctrl.$setViewValue(vv);
                ctrl.$render();
                return $filter('truncate')(floatValue);
            }
            else {
                console.log("input not valid");
                ctrl.$setValidity('float', false);
                return undefined;
            }
        });
    }
 }
}]);

使用html

 <input name="x" type="text" my-float ng-model="value">
 <div>error:{{f.x.$invalid}}</div>

这是一个plnkr

Answer 1

我会说，你把myValue作为字符串，有效期你可以说：

1. if ( myValue[n-2] == ',' or myValue[n-3] ==',')
split the string into two by ,
else split the string into two by .
2. check second splited part is a number and length is less than two else invalid input 
3. check first part is number , If yes a valid input or else invalid

处理浮动输入交叉浏览器

1 个答案: