3

Bom dia pessoal.

Seguinte, preciso fazer com que quando o usuário saia com o foco do campo ou quando for digitando ele formate este campo de acordo com o formato de dinheiro, primeiramente no formato brasileiro.

Exemplo: 14700,25 ou 14,00. Sem os pontos, se não o AngularJS não consegue somar.

Porém ao utilizar o código abaixo, a função toFixed(2) retira os zeros das casas decimais e por exemplo se o usuário informar 32, chega a adicionar os dois zeros depois da vírgula, porém ao modificar no model continua 32 e não 32,00. E se não colocar o parseFloat ao modificar o model fica em branco o campo.

Segue o código:

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

Qual a melhor maneira de resolver este problema?

Agradeço desde já.

2
  • Como é o seu controller? Acho que você deveria estar formatando o valor lá dentro, com um filtro do Angular.
    – bfavaretto
    Commented 10/07/2015 às 14:33
  • Já tentou usar o filtro currency do Angularjs?
    – adelmo00
    Commented 10/07/2015 às 14:35

4 Respostas 4

7

Resolução mais simples e padrão.

Utilize o I18n do angularJS assim colocando ele em português irá ficar com virgula em vez de ponto e tudo nos padrões brasileiros

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

Só colocar este arquivo em seu código: https://github.com/angular/bower-angular-i18n/blob/master/angular-locale_pt-br.js

Abraços

6

Utilize o currency conforme essa documentação.

Você pode especificar inclusive qual o simbolo que separa os números decimais e inteiros e quantas casas decimais deseja

EDIT: Esse filtro é apenas para apresentar na tela e/ou formatar após submeter o formulário.

Ficaria assim: <input ng-model="campoDinheiro" value="{{campoDinheiro | currency:'R$'}}"/>

Se quiser formatar no controller do AngularJS, ficaria assim:

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



Mas, se você precisa de formatar enquanto o usuário está digitando, crie uma directive para fazer isso. Tenha esse exemplo como base, mas altere prefix,centsSeparator,thousandsSeparator conforme você deseja

7
  • Pedro, você poderia explicar como usar na própria resposta?
    – bfavaretto
    Commented 10/07/2015 às 16:14
  • @bfavaretto Olhe ai se ajuda Commented 10/07/2015 às 16:27
  • Ótimo Pedro, obrigado
    – bfavaretto
    Commented 10/07/2015 às 16:34
  • Obrigado @PedroLaini, irei testar aqui no projeto com o filter e não a directiva, já que é para quando o usuário tirar o foco do elemento em que ele digitou. Commented 10/07/2015 às 16:44
  • 1
    Obrigado, descobri como arrumar isto, só que tive que mudar o type do input para number e quando o usuário digita o número é retirado rapidamente. O que fiz foi apenas tirar os . (pontos) assim consegue ser feito o cálculo fora do controller. Commented 10/07/2015 às 20:32
2

Idealmente você não deveria aplicar a formatação no model, mas sim na view, ou seja, no código HTML.

Para aplicar formatação de valores o AngularJS oferece o conceito de filter, que você indica no HTML juntamente com o valor a ser formatado.

Por exemplo, para formatar uma caixa de texto em formato monetário você pode usar o seguinte código na página HTML:

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

Opcionalmente você pode também informar o símbolo monetário que deverá ser usado pela formatação:

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

Desta forma a caixa e texto ficará sempre formatada, ainda assim mantendo o valor do model sem formatação, de forma que não irá atrapalhar de forma alguma os cálculos com esse valor.

1
  • Testei desta maneira, porém ao digitar não está colocando os pontos e as virgulas ao tirar o focus do input. Commented 10/07/2015 às 18:21
2

Grande bom dia, você pode usar também o pacote de idiomas do angular, no site do próprio angular você encontra, e quando for mostrar algum campo que precise de formatação, como datas ou valores monetaŕios, o angular já faz o trabalho de colocar sifrão ou formatar para a configuração usada na liguagem escolhida.

Esse tuto traz um passo-a-passo que pode ajudar muito, como usar angular locale, hello world.

No caso pra fazer o download dos locales suportados pelo Angularjs esse link para o projeto no GitHub exibi toda a lista.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .