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

Question

我正在使用FCSA NumberAngularJS中的十进制输入.

如果我使用该maxDecimals选项,它几乎按预期工作.对于两位小数,像"100.333"这样的输入被转换为"100.33".

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

我怎样才能做到这一点？

Answer 1

我恐怕不熟悉FCSA number:(

但是,如果您的目标是了解如何实现一个可能非常适合您需求的简单,面向角度的解决方案,请继续阅读......您将在下面找到price我在plunker中实现的指令.它非常简单,我建议您花时间研究它,然后在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);
       };
   }]);
   

此过滤器将自动将数据从视图格式(使用逗号)转换为模型格式(您的范围,带小数).

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

此过滤器将自动将数据从模型格式(您的范围,带小数)转换为视图格式(您的视图,使用逗号).

3. 使用这两个过滤器的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;
           });
       }
   };}]);
   

看看这个工作的plunker,展示一切如何一起工作.

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

在视图中,它看起来像:输入中的25,36和下面的数据库中的25.36.

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

希望这能回答你的问题.

使用指令的优势:它可以重复使用,无论您在网站上何处需要它.

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

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

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

如果您需要其他选项,例如FCSANumber指令,您可以轻松地将它们添加到过滤器中.

您可能需要使用自定义函数和模型验证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>