Javascript money format with Angularjs and jQuery

Question

Good morning, everyone.

Next, I need to make when the user leaves 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 points, if not Angularjs can not add up.

However, when using the code below, the function toFixed(2) removes the zeroes from the decimals and, for example, if the user informs 32, it adds the two zeroes after the comma, but when modifying the model continues 32 and not 32.00. And if you do not put parseFloat when modifying the model, the field is left blank.

Follows 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.

Answer 1

Simplest and default resolution.

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

https://github.com/angular/bower-angular-i18n

Just put this file in your code: https://github.com/angular/bower-angular-i18n/blob/master/angular-locale_pt-br.js

Hugs

Answer 2

Use the currency in accordance with that documentation.

You can also specify which symbol separates decimal and integer numbers and how many decimal places you want

EDIT: This filter is only to display on the screen and/or format after submitting the form.

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 user is typing, create a Directive to do this. Take this example as the basis, but change prefix,centsSeparator,thousandsSeparator as you wish

Answer 3

Great day, you can also use the angular language pack, on the website of the angular itself you find, and when showing some field that needs formatting, as dates or monetary values, angular already does the job of placing siphon or formatting for the configuration used in the chosen allotment.

This Uto brings a step-by-step that can help a lot, how to use angular locale, hello world.

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

Answer 4

Ideally you should not apply the format in the model, but rather in the view, ie in HTML code.

To apply value formatting Angularjs offers the concept of filter, which you indicate in HTML along with the value to be formatted.

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

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

Optionally you can also inform the currency symbol that should be used by formatting:

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

This way the box and text will always be formatted, still keeping the model value without formatting, so that it will not disturb in any way the calculations with this value.