number - input currency angularjs

¿Por qué el filtro de moneda AngularJS formatea números negativos entre paréntesis?

Question

Demo en vivo

Por qué esto:

# Controller
$scope.price = -10;

# View
{{ price | currency }}

resulta en ($10.00) lugar de -$10.00 ?

Answer 1

¿Quiere decir mostrar - $ 10.00 en lugar de ($ 10.00)?

El valor predeterminado, al menos angularJs versión 1.2.1 es mostrar entre paréntesis. Ej .: ($ 10.00)).

Si es así, esta es mi situación. He creado un filtro personalizado para eso:

var app = angular.module(''myApp'');

app.filter(''customCurrency'', ["$filter", function ($filter) {       
  return function(amount, currencySymbol){
     var currency = $filter(''currency'');         

     if(amount.charAt(0) === "-"){
        return currency(amount, currencySymbol).replace("(", "-").replace(")", ""); 
     }

     return currency(amount, currencySymbol);
  };

}]);

Así que delega en el filtro de moneda incorporado y "decora" o "decora" los paréntesis.

No pude encontrar una manera de cambiar $ LocaleProvider sobre la marcha. Si alguien sabe por favor hágamelo saber.

Saludos Leonardo Correa

Answer 2

Actualización: Angular 1.4 ya no usa paréntesis para indicar valores negativos, pero ahora usa el símbolo "-". Aquí hay un enlace a una discusión: https://github.com/angular/angular.js/issues/12870

Usé el decorador como lo describió Marc para devolver los .negPre y .negSuf para usar los parens.

Answer 3

Esta es una forma popular de representar monedas negativas. Wikipedia :

En la contabilidad, los montos adeudados a menudo se representan con números rojos, o un número entre paréntesis, como una notación alternativa para representar números negativos.

Puede ver en el código fuente Angular donde hacen esto ( negSuf / negPre ):

function $LocaleProvider(){
  this.$get = function() {
    return {
      id: ''en-us'',

      NUMBER_FORMATS: {
        DECIMAL_SEP: ''.'',
        GROUP_SEP: '','',
        PATTERNS: [
          { // Decimal Pattern
            minInt: 1,
            minFrac: 0,
            maxFrac: 3,
            posPre: '''',
            posSuf: '''',
            negPre: ''-'',
            negSuf: '''',
            gSize: 3,
            lgSize: 3
          },{ //Currency Pattern
            minInt: 1,
            minFrac: 2,
            maxFrac: 2,
            posPre: ''/u00A4'',
            posSuf: '''',
            negPre: ''(/u00A4'',
            negSuf: '')'',
            gSize: 3,
            lgSize: 3
          }
        ],
        CURRENCY_SYM: ''$''
      },

Answer 4

Funciona mejor para mí marcando el número negativo:

var app = angular.module(''myApp'');

app.filter(''customCurrency'', ["$filter", function ($filter) {       
    return function(amount, currencySymbol){
        var currency = $filter(''currency'');         

        if(amount < 0){
           return currency(amount, currencySymbol).replace("-", "(") + '')''
        }

        return currency(amount, currencySymbol);
    };
}]);

Answer 5

Sé que esta es una pregunta antigua, pero la respuesta aceptada es solo responder por qué sucede esto, sin una solución concreta al problema. Creo que la "manera más correcta" de hacer esto, es usar un decorador así:

angular
    .module(''app'')
    .config([''$provide'', function($provide) {
        $provide.decorator(''$locale'', [''$delegate'', function($delegate) {
          if($delegate.id == ''en-us'') {
            $delegate.NUMBER_FORMATS.PATTERNS[1].negPre = ''-/u00A4'';
            $delegate.NUMBER_FORMATS.PATTERNS[1].negSuf = '''';
          }
          return $delegate;
        }]);
      }]);

Esto solo se llama una vez, válido para cualquier filtro que dependa de él, y no necesita un filtro personalizado para el formato de su moneda.

Answer 6

Si no te importa mantener el paréntesis y solo quieres una manera rápida y fácil de lograrlo
Por ejemplo: -($250.00) intente lo siguiente:

<ul ng-repeat="data in customers">
  <li>
    Balance: 
    <span ng-if="data.balance<0">-</span>
    <span ng-if="data.balance>0">+</span>
    {{data.balance | currency}}
  </li>
</ul>  

Si desea eliminar el () , puede crear su propio filtro o probar las otras respuestas.