web-dev-qa-db-fra.com

Pourquoi le filtre de devises AngularJS formate-t-il les nombres négatifs avec des parenthèses?

Démo en direct

Pourquoi ça:

# Controller
$scope.price = -10;

# View
{{ price | currency }}

résulte en ($10.00) plutôt que -$10.00?

angularjsangularjs-filter
29
Misha Moroshko

C'est un moyen populaire de représenter les devises négatives. Wikipédia :

En comptabilité, les montants dus sont souvent représentés par des nombres rouges, ou entre parenthèses, comme notation alternative pour représenter des nombres négatifs.

Vous pouvez voir dans le code source Angular où ils font ceci (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: '$'
      },
31
Ryan Cavanaugh

Je sais que c’est une vieille question, mais la réponse acceptée n’est que de répondre pourquoi cela se produit sans solution concrète au problème. Je pense que le "moyen le plus correct" de faire cela est d'utiliser un décorateur comme celui-ci:

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

Ceci n'est appelé qu'une fois, valable pour tout filtre qui en dépend, et vous n'avez pas besoin de filtre personnalisé pour le formatage de votre devise.

76
marc

Cela fonctionne mieux pour moi en vérifiant le nombre négatif:

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

Voulez-vous dire affichage - 10,00 $ au lieu de (10,00 $)?

La version 1.2.1 au moins angularJs par défaut consiste à afficher entre parenthèses. Ex .: (10,00 $)).

Si oui, c'est ma situation. J'ai créé un filtre personnalisé pour cela:

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

}]);

Donc, il délègue au filtre monétaire intégré et "décore" ou "décolle" les parenthèses.

Je ne pouvais pas trouver un moyen de changer $ LocaleProvider à la volée. Si quelqu'un sait s'il vous plaît faites le moi savoir. 

acclamations Leonardo Correa 

9
Leonardo

Mise à jour: Angular 1.4 n'utilise plus les parenthèses pour indiquer les valeurs négatives, mais utilise maintenant le symbole "-". Voici un lien vers une discussion: https://github.com/angular/angular.js/issues/12870

J'ai utilisé le décorateur comme décrit par Marc pour rendre le .negPre et le .negSuf utiliser les parens.

5
user1488759

Si cela ne vous dérange pas de garder la parenthèse et que vous voulez juste un moyen rapide et facile d'y parvenir
Par exemple: -($250.00) essayez ce qui suit:

<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 vous souhaitez supprimer le (), vous pouvez créer votre propre filtre ou essayer les autres réponses. 

1
Felipe Alarcon

Modifiez votre fichier angular.js autour du numéro de ligne -36180 Change negPre et negSuf en supprimant - et en mettant entre parenthèses

Par exemple

Changer de :  

"NUMBER_FORMATS": {
"CURRENCY_SYM": "$",
"DECIMAL_SEP": ".",
"GROUP_SEP": ",",
"PATTERNS": [
  {
    "gSize": 3,
    "lgSize": 3,
    "maxFrac": 3,
    "minFrac": 0,
    "minInt": 1,
    "negPre": "-",
    "negSuf": "",
    "posPre": "",
    "posSuf": ""
  },
  {
    "gSize": 3,
    "lgSize": 3,
    "maxFrac": 2,
    "minFrac": 2,
    "minInt": 1,
    "negPre": "-\u00a4",
    "negSuf": "",
    "posPre": "\u00a4",
    "posSuf": ""
  }
]

}

À  

"NUMBER_FORMATS": {
"CURRENCY_SYM": "$",
"DECIMAL_SEP": ".",
"GROUP_SEP": ",",
"PATTERNS": [
  {
    "gSize": 3,
    "lgSize": 3,
    "maxFrac": 3,
    "minFrac": 0,
    "minInt": 1,
    "negPre": "-",
    "negSuf": "",
    "posPre": "",
    "posSuf": ""
  },
  {
    "gSize": 3,
    "lgSize": 3,
    "maxFrac": 2,
    "minFrac": 2,
    "minInt": 1,
    "negPre": "(\u00a4",
    "negSuf": ")",
    "posPre": "\u00a4",
    "posSuf": ""
  }
]

}

0
Tinashe Robert