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

2023-09-13 04:30:50 作者:三千繁华、虚梦一场

我使用 FCSA数 处理小数点输入AngularJS。

如果我使用 maxDecimals 选项几乎按预期工作。对于两位小数,如输入100.333转化为100.33。

在我所在的地区使用逗号作为小数点分隔符,但在我的网站上输入要使用点作为小数点分隔符 - 这样的插件不。没关系。不过,我想喜欢100,33转换为100.33。

这是输入

我怎么能这样做?

解决方案

我怕我不熟悉的 FCSA号:(

  

不过,如果你的目标是了解如何实施简单 面向角度的解决方案这可能满足您的需求,请继续阅读...  你会发现下面的价格指令我在plunker实现。这是很简单的,我建议你花时间去研究它,然后实现自己的解决方案,由价格指令和 FCSA既启发源$ C ​​$ C。

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

  app.filter('comma2decimal',[功能(){//应该被改变,以满足您的需求    返回功能(输入){    VAR RET =(输入)input.toString()修剪()代替(,):空;。        返回parseFloat(RET);    };}]); 
angular js 怎么实现某个input框输入值就显示某个div

这个过滤器会自动转换视图格式的数据(用逗号分隔)来模拟格式(你的范围,以十进制)。

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

  app.filter('decimal2comma',[功能(){//应该被改变,以满足您的需求    返回功能(输入){        VAR RET =(输入)input.toString()代替(,):空;?        如果(RET){            变种decArr = ret.split(,);            如果(decArr.length→1){                VAR DEC = decArr [1]。长度;                如果(分解=== 1){RET + =0;}            } //这是为了显示价格像12,20,而不是12,2        }        返回RET;    };}]); 

这个过滤器会自动从模型格式数据转换(你的范围,以十进制)来查看格式(您的视图,用逗号分隔)。

指令名为价格使用这两个过滤器:

  app.directive('价格',['$过滤',功能($过滤器){返回{    限制:'A',    要求:'ngModel',    链接:功能(范围,元素,ATTRS,ngModelController){        ngModelController。$ parsers.push(功能(数据){            //从视图中格式转换的数据模型格式            数据= $过滤器('comma2decimal')(数据);            返回的数据;        });        ngModelController。$ formatters.push(功能(数据){            //从模型格式转换的数据来查看格式            数据= $过滤器('decimal2comma')(数据);            返回的数据;        });    }};}]); 

请参阅这个工作plunker ,显示一切是如何一起工作。

首先,一个数字(例如,从数据库来)具有控制器范围十进制值($ scope.price = 25.36);

在视图,它看起来像:25,36在输入和25.36,作为在数据库中,以下

现在进入任何逗号号码:它会自动转换成十进制数插入数据库

希望这回答你的问题。

使用指令的优点:它是可重复使用,无论你需要在你的网站

。使用2个的

优点:关注点分离

此方法可让用户使用他们最在你的意见用于数字。但是,输入的数字可以插入到数据库之前,背景改变,所以它们的格式正确。

而当你从数据库中获取价格/号码都自动改变,在更适合读者的方式的观点呈现了。

如果你需要其他的选择像 FCSA 号指令,你可以很容易地在你的过滤器添加。

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

I'm using FCSA Number to handle decimal input in AngularJS.

If I use the maxDecimals option it almost works as expected. For two decimals, inputs like "100.333" are transformed to "100.33".

In my region comma is used as decimal separator, but the input on my website should use dot as decimal separator -- like this plugin does. That's fine. However, I would like that input like "100,33" are converted to "100.33".

How can I do that?

解决方案

I am afraid I am unfamiliar with FCSA number :(

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.

a filter to convert comma numbers to decimal numbers:

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

This filter will automatically convert data from view format (with a comma) to model format (your scope, with a decimal).

a filter to convert decimal numbers to comma numbers:

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

This filter will automatically convert data from model format (your scope, with a decimal) to view format (your view, with a comma).

a directive named price that uses those two filters:

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

See this working plunker, showing how everything works together.

Initially, a number (e.g. coming from database) has a decimal value in controller scope ($scope.price=25.36;);

In the view, it appears like: 25,36 in the input, and 25.36, as in the database, below.

Now enter any comma number: it is automatically converted to decimal number for insertion in database.

Hoping this answers your question.

Advantage of using a directive: it is reusable, everywhere you need it on your website.

Advantage of using two filters: separation of concerns.

This approach lets users use numbers they are most used to in your views. However, the numbers entered can be altered in the background before insertion into database, so they are formatted properly.

And when you fetch prices/numbers from the database, they are automatically altered, before showing in the view in a way better suited to the reader.

If you need other options like in the FCSA Number directive, you can easily add them in your filters.

You will probably need custom functions and model validation, using ngModelCtrl.$setValidity.