Perché il filtro valuta AngularJS formatta i numeri negativi con parentesi?

Question

Live Demo

Perchè questo:

# Controller 
$scope.price = -10; 

# View 
{{ price | currency }} 

risultati in ($10.00) piuttosto che -$10.00?

Answer 1

Questo è un modo popolare per rappresentare valute negative. Wikipedia:

In contabilità, debiti sono spesso rappresentati da numeri rossi, oppure un numero tra parentesi, come una notazione alternativa per rappresentare numeri negativi.

Si può vedere nel codice sorgente angolare in cui lo fanno (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 2

vuoi dire visualizzazione - US $ 10,00 invece di ($ 10,00)?

La versione 1.2.1 di default, almeno angolare, deve essere visualizzata con parentesi. Es .: ($ 10.00)).

Se è così, questa è la mia situazione. Ho creato un filtro personalizzato per questo:

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

}]); 

in modo che i delegati per il filtro incorporato valuta e "decora" o "non-decora" le parentesi.

Non riesco a trovare un modo per cambiare $ LocaleProvider al volo. Se qualcuno lo sa, per favore fatemelo sapere.

applausi Leonardo Correa

Answer 3

Funziona meglio per me controllando numero 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 4

So che questa è una vecchia questione, ma la risposta accettata risponde solo perché questo accade, senza una soluzione concreta al problema. Credo che il "modo più corretto" di fare questo, è quello di utilizzare un decoratore in questo modo:

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

Questo è chiamato una sola volta, valido per qualsiasi filtro che dipende da esso, e non hai bisogno di un personalizzato filtro per la formattazione della valuta.

Answer 5

Se non ti dispiace mantenendo la parentesi e semplicemente vuoi un modo semplice e veloce per raggiungere questo obiettivo
ad esempio: -($250.00) provare quanto segue:

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

Se si desidera rimuovere il (), allora si può crea il tuo filtro o prova le altre risposte.

Answer 6

Aggiornamento: Angular 1.4 non utilizza più le parentesi per indicare valori negativi, ma ora utilizza il simbolo "-". Ecco un link a una discussione: https://github.com/angular/angular.js/issues/12870

Ho usato il decoratore come descritto da marc per restituire .negPre e .negSuf per usare i paren.