Question

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

如果我使用maxDecimals选项，它几乎按预期工作。对于两位小数，输入如＆＃34; 100.333＆＃34;被转换为＆＃34; 100.33＆＃34;。

在我的区域中，逗号用作小数点分隔符，但我网站上的输入应使用点作为小数分隔符 - 就像这个插件一样。没关系。但是，我希望像＆＃34; 100,33＆＃34;转换为＆＃34; 100.33＆＃34;。

我该怎么做？

Answer 1

我恐怕不熟悉FCSA number :(

但是，如果您的目标是了解如何实施可能非常适合您需求的简单，面向角度的解决方案，请继续阅读... 您将在下面找到我在plunker中实现的price指令。这很简单，我建议您花时间研究它，然后在price指令和FCSA源代码的启发下实现自己的解决方案。

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

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

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

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

使用这两个过滤条件的名为价格的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;
        });
    }
};}]);

请参阅this working plunker，了解所有内容如何协同工作。

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

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

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

希望这能回答你的问题。

使用指令的优势：它可以重复使用，无论您在网站上何处需要它。

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

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

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

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

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

Answer 2

添加相应的区域设置：

<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.5.0/angular-locale_en-us.min.js"></script>

您可以在此处查看可用的区域设置列表：https://cdnjs.com/libraries/angular-i18n

Answer 3

您只需使用角度number过滤器并更改角度的默认分隔符和组字符。

app.run(["$locale", function ($locale) {
    $locale.NUMBER_FORMATS.GROUP_SEP = " ";
    $locale.NUMBER_FORMATS.DECIMAL_SEP = ".";
}]);

然后在你的HTML中：

<p>{{ the_number | number:0 }}</p>

Answer 4

我使用了非正统的解决方案。在Angular的.js中，我查找了“DECIMAL_SEP”并更改了：

DECIMAL_SEP:".",GROUP_SEP:","

到

DECIMAL_SEP:",",GROUP_SEP:"."

它有效！不是最好的解决方案，但它有效......我只想帮忙。

PS。我来自哥伦比亚，对不起，如果我的英语不好。

Answer 5

缩短方式：

app.filter('commaToDecimal', function(){
    return function(value) {
        return value ? parseFloat(value).toFixed(2).toString().replace('.', ',') : null;
    };
});

Answer 6

解决方案：

.filter('dot2comma', [
  function() {
    return function(value) {
      return value.toString().replace(/\./g,',');
    };
  }]);

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

6 个答案: