AngularJS十进制输入: change comma to dot

Question

我正在使用FCSA Number处理 AngularJS 中的小数输入。

如果我使用 maxDecimals 选项，它几乎可以按预期工作。对于两位小数，“100.333”等输入将转换为“100.33”。

在我的地区，逗号用作小数分隔符，但我网站上的输入应使用点作为小数分隔符 - 就像此插件一样。没关系。但是，我希望将“100,33”这样的输入转换为“100.33”。

我怎样才能做到这一点？

Answer 1

恐怕我不熟悉FCSA编号 :(

However, if your goal is to understand how to implement a simple, angular-oriented solution that may well suit your needs, read on... You will find below the price directive I implemented in a plunker. It is quite straightforward, and I recommend you take the time to study it, then implement your own solution, inspired by both the price directive and the FCSA source code.

<小时/>

1. 将逗号数字转换为十进制数字的过滤器:

   app.filter('comma2decimal', [
   function() { // should be altered to suit your needs
       return function(input) {
       var ret=(input)?input.toString().trim().replace(",","."):null;
           return parseFloat(ret);
       };
   }]);
   

此过滤器会自动将数据从 View 格式(带逗号)转换为模型格式(您的范围，带小数)。

<小时/>

将十进制数字转换为逗号数字的过滤器:

app.filter('decimal2comma', [
function() {// should be altered to suit your needs
    return function(input) {
        var ret=(input)?input.toString().replace(".",","):null;
        if(ret){
            var decArr=ret.split(",");
            if(decArr.length>1){
                var dec=decArr[1].length;
                if(dec===1){ret+="0";}
            }//this is to show prices like 12,20 and not 12,2
        }
        return ret;
    };
}]);

此过滤器会自动将数据从模型格式(您的范围，带小数)转换为 View 格式(您的 View ，带逗号)。

<小时/>

名为 price 的指令，它使用这两个过滤器:

app.directive('price', ['$filter',
function($filter) {
return {
    restrict:'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelController) {
        ngModelController.$parsers.push(function(data) {
            //convert data from view format to model format

            data=$filter('comma2decimal')(data);

            return data;
        });

        ngModelController.$formatters.push(function(data) {
            //convert data from model format to view format

            data=$filter('decimal2comma')(data);

            return data;
        });
    }
};}]);

<小时/>

参见this working plunker ，展示一切如何协同工作。

最初，一个数字(例如来自数据库)在 Controller 范围内具有十进制值($scope.price=25.36;)；

在 View 中，它显示为:输入中的 25,36，以及数据库中的 25.36，如下所示。

现在输入任何逗号数字:它会自动转换为十进制数字以插入数据库。

希望这能回答您的问题。

<小时/>

使用指令的优点:它是可重用的，您网站上任何需要它的地方都可以使用。

使用两个过滤器的优点:关注点分离。

<小时/>

此方法允许用户在您的 View 中使用他们最习惯的数字。但是，输入的数字在插入数据库之前可以在后台更改，因此它们的格式正确。

当您从数据库中获取价格/数字时，它们会自动更改，然后以更适合读者的方式显示在 View 中。

如果您需要诸如 FCSA Number 指令中的其他选项，您可以轻松地将它们添加到过滤器中。

您可能需要使用 ngModelCtrl.$setValidity 自定义函数和模型验证。