4

Estou com um problema na máscara de moeda com AngularJS.

Eu achei essa thread no Stackoverflow em inglês. A máscara funciona beleza digitando no input e chega certo no controller, porém quando eu mando formatado do controller para a tela não rola.

Aqui tem um exemplo.

  • Trecho do código da directive
    app.directive('format', ['$filter',
        function ($filter) {
            return {
                require: '?ngModel',
                link: function (scope, elem, attrs, ctrl) {
                    if (!ctrl) return;

                    ctrl.$formatters.unshift(function (a) {
                        return $filter(attrs.format)(ctrl.$modelValue)
                    });

                    ctrl.$parsers.unshift(function (viewValue) {
                        elem.priceFormat({
                            prefix: '',
                            centsSeparator: ',',
                            thousandsSeparator: '.'
                        });

                        return elem[0].value;
                    });
                }
            };
        }
    ]);
  • Código da pagina
    <!DOCTYPE html>
    <html ng-app="plunker">

    <head>
      <meta charset="utf-8" />
      <title>AngularJS Plunker</title>
      <script>
        document.write('<base href="' + document.location + '" />');
      </script>
      <link rel="stylesheet" href="style.css" />
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js">    </script>
      <script data-require="[email protected]" src="http://code.angularjs.org/1.2.9/angular.js" data-semver="1.2.9"></script>
      <script src="app.js"></script>
    </head>

    <body ng-controller="MainCtrl">

      <div>
        <br/>Original Example 
    <input type="text" ng-model="test" format="number" /> 
    <pre>{{test|json}}</pre><br/>

    Example 1<input type="text" ng-model="test_2" format="number" /> 
    <pre>{{test_2|json}}</pre><br/>

    Example 2<input type="text" ng-model="test_3" format="number" /> 
    <pre>{{test_3|json}}</pre><br/>

      </div>
    </body>

    </html>
2
  • Não entendi o problema. O exemplo aqui está funcionando perfeitamente, tanto o input quanto o pre com o valor embaixo.
    – user3753
    Commented 30/01/2014 às 18:50
  • da uma olhada no exemplo 2, mando formatado no estilo 'brasileiro', '999.999,99', só que ele não aparece no input, porém no exemplo 1 ele aparece no campo mas pq a formatação esta no estilo 'americano','999,999.99'. Commented 30/01/2014 às 23:20

2 Respostas 2

2

Não sei de onde você tirou esse código, mas ele é claramente inconsistente. Numa função você usa o $filter padrão do AngularJS, na outra você usa um plugin do jQuery para formatação de números.

O $filter só roda no início, com os números que já estão definidos no $scope, o outro roda a cada alteração.

Apesar d'eu achar que não é uma boa idéia misturar plugins de jQuery que lidam com elementos no DOM misturados com filters do AngularJS, se você usar a mesma função nos dois casos a coisa funciona:

app.directive('format', ['$filter',
  function($filter) {
    return {
      require: '?ngModel',
      link: function(scope, elem, attrs, ctrl) {
        if (!ctrl) return;


        ctrl.$formatters.unshift(function(a) {
          elem[0].value = ctrl.$modelValue
          elem.priceFormat({
            prefix: '',
            centsSeparator: ',',
            thousandsSeparator: '.'
          });
          return elem[0].value;
        });

        ctrl.$parsers.unshift(function(viewValue) {
          elem.priceFormat({
            prefix: '',
            centsSeparator: ',',
            thousandsSeparator: '.'
          });
          return elem[0].value;
        });
      }
    };
  }
]);

Plunker.

EDIÇÃO:

Aqui uma forma melhor de fazer essa coisa:

Defina um filter para fazer a conversão copiando parcialmente o código do plugin do jQuery:

app.filter('priceformat', function () {
      var is_number = /[0-9]/;
      var prefix = ''
      var suffix = ''
      var centsSeparator = ','
      var thousandsSeparator = '.'
      var limit = false
      var centsLimit = 2
      var clearPrefix = false
      var clearSufix = false
      var allowNegative = false
      var insertPlusSign = false
      if (insertPlusSign) allowNegative = true;

      function to_numbers(str) {
        var formatted = '';
        for (var i = 0; i < (str.length); i++) {
          char_ = str.charAt(i);
          if (formatted.length == 0 && char_ == 0) char_ = false;
          if (char_ && char_.match(is_number)) {
            if (limit) {
              if (formatted.length < limit) formatted = formatted + char_
            } else {
              formatted = formatted + char_
            }
          }
        }
        return formatted
      }

      function fill_with_zeroes(str) {
        while (str.length < (centsLimit + 1)) str = '0' + str;
        return str
      }

      return function (str) {
        var formatted = fill_with_zeroes(to_numbers(str));
        var thousandsFormatted = '';
        var thousandsCount = 0;
        if (centsLimit == 0) {
          centsSeparator = "";
          centsVal = ""
        }
        var centsVal = formatted.substr(formatted.length - centsLimit, centsLimit);
        var integerVal = formatted.substr(0, formatted.length - centsLimit);
        formatted = (centsLimit == 0) ? integerVal : integerVal + centsSeparator + centsVal;
        if (thousandsSeparator || $.trim(thousandsSeparator) != "") {
          for (var j = integerVal.length; j > 0; j--) {
            char_ = integerVal.substr(j - 1, 1);
            thousandsCount++;
            if (thousandsCount % 3 == 0) char_ = thousandsSeparator + char_;
            thousandsFormatted = char_ + thousandsFormatted
          }
          if (thousandsFormatted.substr(0, 1) == thousandsSeparator) thousandsFormatted = thousandsFormatted.substring(1, thousandsFormatted.length);
          formatted = (centsLimit == 0) ? thousandsFormatted : thousandsFormatted + centsSeparator + centsVal
        }
        if (allowNegative && (integerVal != 0 || centsVal != 0)) {
          if (str.indexOf('-') != -1 && str.indexOf('+') < str.indexOf('-')) {
            formatted = '-' + formatted
          } else {
            if (!insertPlusSign) formatted = '' + formatted;
            else formatted = '+' + formatted
          }
        }
        if (prefix) formatted = prefix + formatted;
        if (suffix) formatted = formatted + suffix;
        return formatted
      }
})

(Aqui está com os valores diretos no código, mas você pode fazer diferentes)

Depois use esse filter na sua directive:

  ctrl.$formatters.unshift(function(a) {
     return $filter('priceformat')(ctrl.$modelValue)
  });
  ctrl.$parsers.unshift(function(viewValue) {
     return $filter('priceformat')(viewValue)
  });

Plunker.

2
  • saquei a ideia @Giovanni, valeu cara. Achei esse código no StackOverflow em inglês num poste sobre máscara, e dos códigos que para formatar valor decimal, esse era o que mais se aproximava da necessidade Commented 31/01/2014 às 16:22
  • Ah, é. Tinha me esquecido do poste que você linkou aí.
    – user3753
    Commented 31/01/2014 às 17:57
1

Aqui eu criei uma função para formatar.

//Função formatação e Mascara de input.
function funSftMask(value, format) {
    /* Aqui verifica se o campo aceita mais de um formato.
    Ex:(99)99999-9999|(99)9999-9999 sepada por pipe(|)  */
    format = format.indexOf("|") !== -1 ? format.split("|") : format;
    /* Varre a lista e verifica o valor passado e aplica a mascara conforme o tamanho da string. */
    if(format instanceof Array){
        for(var i = 0; i < format.length; i++){
            if(format[i].replace(/[^\d]+/g, '').length === value.length){
                format = format[i];
                break;
            }
        }
    }
    /* Caso não indentifique um tamanho padrão seleciona o primeiro  */
    if(format instanceof Array){
        format = format[1];
    }
    value = value.split("");
    format = format.split("");
    var result = "";
    var x = 0;
    for (var i = 0; i < format.length; i++) {
        if (format[i] !== "9") {
            x--;
        }
        if (x >= value.length)
            break;
        result += format[i] === '9' ? value[x] : format[i];
        x++;
    }
    return result;
}

Aqui o input que recebera a mascara

<input type="text" placeholder="Somente numeros" sft-mack="(99)99999-9999|(99)9999-9999" />

aqui a directiva que formatara o input conforme for digitando.

nomedaApp.directive('sftMack', function () {
    return {
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {
            var id = '#' + attrs.id;
            elem.add(id).on('keyup', function () {
                var x = funSftMask(elem.val().replace(/[^\d]+/g, ''), attrs.sftMack);
                elem.val(x);
            });
        }
    };
});

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 .