JavaScript money format with AngularJS and jQuery

Navigation
3

Good morning everyone.

Next, I need to make when the user exits with the focus of the field or when typing it, format this field according to the format of money, first in the Brazilian format.

Example: 14700.25 or 14.00. Without the dots, if not AngularJS can not add.

But using the code below, the toFixed (2) function removes the zeros from the decimal places and for example if the user informs 32, it even adds the two zeros after the comma, however when modifying in the model continues 32 and not 32.00. And if you do not put parseFloat when modifying the model, the field is blank.

Follow the code: 

    function formatarNumero(id, campo){

    var scope = angular.element(document.getElementById('divVendaProdutos')).scope();

    var valor_campo;

    if (campo == 1){
        valor_campo = $('#quantidade' + id)[0].value;
        var amt = parseFloat(valor_campo);
        amt = amt.toFixed(2);
         scope.$apply(function () {
            scope.invoice.items[id].quantidade = parseFloat(amt);
         });
    }

    if (campo == 2){
        valor_campo = $('#valorUnitario' + id)[0].value;
        var amt = parseFloat(valor_campo);
        amt = amt.toFixed(2);
        scope.$apply(function () {
            scope.invoice.items[id].valorUnitario = parseFloat(amt);
        });
    }   
}

What is the best way to solve this problem?

Thank you in advance.

    
asked by anonymous 10.07.2015 / 15:00

4 answers

6

Use the currency as per this documentation. You can even specify which symbol separates the decimal and integer numbers and how many decimal places you want

EDIT: This filter is only for display and / or formatting after submitting the form. It would look like this: <input ng-model="campoDinheiro" value="{{campoDinheiro | currency:'R$'}}"/>

If you want to format in the AngularJS controller, it would look like this: 

$filter('currency')(campoDinheiro, 'R$')


But if you need to format while the user is typing, create a directive to do this. Take this example as a basis, but change prefix,centsSeparator,thousandsSeparator as you wish.

    
10.07.2015 / 18:13
7

Simplest and default resolution.

Use the I18n of angularJS so putting it in Portuguese will be comma instead of point and everything in Brazilian standards

link

Just put this file in your code: link

Hugs

    
14.07.2015 / 15:57
2

Ideally you should not apply the formatting in the model, but rather in the view, that is, in the HTML code.

In order to apply value formatting AngularJS offers the filter concept, which you indicate in the HTML along with the value to be formatted.

For example, to format a text box in monetary format you can use the following code in the HTML page: 

<input type="text" value="{{valorUnitario | currency}}" />

Optionally you can also enter the currency symbol that should be used for formatting: 

<input type="text" value="{{valorUnitario | currency:'R$'}}" />

In this way the box and text will always be formatted, still keeping the value of the model unformatted, so that it will not disturb the calculations with this value at all.

    
10.07.2015 / 18:30
2

Great morning, you can also use the angular language pack, on the website of the angular you find, and when you show some field that needs formatting, such as dates or monetary values, angular already does the work of place the sifrão or format for the configuration used in the chosen language.

This tutorial takes a step-by-step approach that can help a lot, and how to use angular locale, hello world .

In case to download the locales supported by Angularjs this link to the project in GitHub displayed the entire list.

    
13.10.2015 / 13:34
How to cut a string? Increase number of rows returned by select group in MySQL