AngularJS十进制输入：将逗号更改为点

Question

我FCSA Number用来处理AngularJS中的十进制输入。

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

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

我怎样才能做到这一点？

Answer 1

恐怕我不熟悉FCSA number:(

但是，如果您的目标是了解如何实现一个 很容易 满足您需求的 简单的 ， 面向角度的解决方案
，请继续阅读…您将在price我在插件中实现的指令下面找到。它非常简单，我建议您花些时间研究它，然后在price指令和FCSA源代码的启发下实现自己的解决方案。

1. a filter将逗号数字转换为十进制数字：

        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);
        };
    }]);

此过滤器将自动将数据从视图格式（带逗号）转换为模型格式（您的范围，带小数）。

1. a filter将十进制数字转换为逗号数字：

        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;
        };
    }]);

此过滤器将自动将数据从模型格式（您的范围，带小数点）转换为视图格式（您的视图，带逗号）。

1. 使用这两个过滤器的directive指定 价格 ：

        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;
            });
        }
    };}]);

查看这个工作正常的工具，展示一切如何协同工作。

最初，数字（例如，来自数据库）在控制器范围内具有十进制值（$ scope.price = 25.36;）；

在视图中，它看起来像：在输入中为25,36，在下面的数据库中为25.36。

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

希望这能回答您的问题。

使用指令的优势 ：它可重复使用，可在您网站上的任何地方使用它。

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

这种方法使用户可以使用他们在视图中最常用的数字。但是，输入的数字在插入数据库之前可以在后台更改，因此它们的格式正确。

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

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

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