web-dev-qa-db-fra.com

Supprimer le filtre de devise AngularJS decimal/cents

Existe-t-il un moyen de supprimer les décimales/cents de la sortie d'un filtre de devise? Je fais quelque chose comme ça:

<div>{{Price | currency}}</div>

Quelles sorties:

1 000,00 $

Au lieu de cela, je voudrais:

1000 $

Cela peut-il être fait en utilisant le filtre monétaire? Je sais que je peux ajouter un signe dollar à un nombre et que je peux écrire mon propre filtre, mais j'espérais qu'une méthode simple existe avec le filtre de devise existant.

Je vous remercie.

angularjsfilterformattingangularjs-filter
64
Mike Pateras

Update: à partir de la version 1.3.0 - currencyFilter: ajoute fractionSize en tant que paramètre facultatif, voir commit .__ et mis à jour plunker

{{10 | currency:undefined:0}}

Notez que c'est le deuxième paramètre, vous devez donc passer non défini pour utiliser le symbole monétaire des paramètres régionaux actuels.

Update: notez que cela ne fonctionne que pour les symboles monétaires affichés avant le nombre . À partir de la version 1.2.9, il est toujours codé en dur à 2 décimales.

Ici est une version modifiée qui utilise une copie du formatNumber de angular pour activer 0 fractionSize en devise.

Normalement, cela devrait être configurable dans la définition de l'environnement local ou dans l'appel de currencyFilter, mais pour l'instant (1.0.4), il est codé en dur avec 2 décimales.

Filtre personnalisé:

myModule.filter('noFractionCurrency',
  [ '$filter', '$locale',
  function(filter, locale) {
    var currencyFilter = filter('currency');
    var formats = locale.NUMBER_FORMATS;
    return function(amount, currencySymbol) {
      var value = currencyFilter(amount, currencySymbol);
      var sep = value.indexOf(formats.DECIMAL_SEP);
      if(amount >= 0) { 
        return value.substring(0, sep);
      }
      return value.substring(0, sep) + ')';
    };
  } ]);

Modèle:

<div>{{Price | noFractionCurrency}}</div>

Exemple:

Update: correction d'un bug lors de la gestion des valeurs négatives

114
Liviu T.

La question semble être assez ancienne et les réponses données sont gentilles. Cependant, il existe une autre solution alternative qui peut également aider (que j'utilise dans mes projets).

Cela fonctionne très bien avec les symboles monétaires préfixant ainsi que le suffixe du nombre pour les valeurs positives et négatives.

Filtre personnalisé:

angular.module('your-module', [])
    .filter('nfcurrency', [ '$filter', '$locale', function ($filter, $locale) {
        var currency = $filter('currency'), formats = $locale.NUMBER_FORMATS;
        return function (amount, symbol) {
            var value = currency(amount, symbol);
            return value.replace(new RegExp('\\' + formats.DECIMAL_SEP + '\\d{2}'), '')
        }
    }])

Modèle:

<div>{{yourPrice| nfcurrency}}</div>

Exemples pour différents lieux:

  • 10.00 (fr-fr) -> £ 10
  • 20.00 (fr) -> 20 $
  • -10,00 (fr) -> (10 $)
  • 30.00 (da-dk) -> 30 kr
  • -30.00 (da-dk) -> -30 kr

Consultez la démo en direct pour dollars US et couronne danoise .

Mettre à jour

Veuillez noter que cette solution de contournement est valable pour AngularJS 1.2 et les versions antérieures de la bibliothèque. À partir de AngularJS 1.3, vous pouvez utiliser currency formateur avec le troisième paramètre spécifiant la taille de la fraction - "Nombre de décimales pour arrondir le montant à". 

Notez que pour utiliser le format monétaire par défaut provenant de la localisation AngularJS, vous devez utiliser le symbole monétaire (deuxième paramètre) défini sur undefined (null ou vide ne fonctionnera PAS). Exemple dans les démos pour dollars américains et couronne danoise .

32
Tom

Une autre chose à considérer est que si vous savez que vous n’avez qu’une seule locale ou un seul type de devise, vous pouvez placer le symbole de la devise avant le numéro, puis utiliser le filtre de nombres comme suit (pour la devise américaine).

  ${{Price | number:0}}

Plus une solution rapide si vous ne voulez pas ajouter un nouveau filtre et n’avoir qu’une devise.

29
JM Huret

Il est tard mais peut-être peut-il aider quelqu'un

{{value | currency : 'Your Symbol' : decimal points}}

Voyons quelques exemples avec la sortie

{{10000 | currency : "" : 0}}           // 10,000
{{10000 | currency : '$' : 0}}          // $10,000 
{{10000 | currency : '$' : 2}}          // $10,000.00 
{{10000 | currency : 'Rs.' : 2}}        // Rs.10,000.00
{{10000 | currency : 'USD $' : 2}}      // USD $10,000.00
{{10000 | currency : '#' : 3}}          // #10,000.000
{{10000 | currency : 'ANYTHING: ' : 5}} // ANYTHING: 10,000.00000

Voir la démo

17
Ali Adravi

Ceci est une autre solution similaire, mais supprime .00 décimale, mais laisse toute autre quantité décimale.

10,00 $ à 10 $

10,20 $ à 10,20 $

app.filter('noFractionCurrency', [ '$filter', '$locale', function(filter, locale) {
    var currencyFilter = filter('currency');
    var formats = locale.NUMBER_FORMATS;
    return function(amount, currencySymbol) {
        amount = amount ? (amount*1).toFixed(2) : 0.00;
        var value = currencyFilter(amount, currencySymbol);
        // split into parts
        var parts = value.split(formats.DECIMAL_SEP);
        var dollar = parts[0];
        var cents = parts[1] || '00';
            cents = cents.substring(0,2)=='00' ? cents.substring(2) : '.'+cents; // remove "00" cent amount
        return dollar + cents;
    };
}]);
5
Dustin

La solution pour la version angulaire <1.3, Si vous utilisez i18n est la plus simple:

$filter('number')(x,0) + ' ' +$locale.NUMBER_FORMATS.CURRENCY_SYM;

Ainsi, le numéro est formaté avec les séparateurs appropriés et le symbole monétaire basé sur les paramètres régionaux.

3
AndreiC

Une autre solution, celle-ci, supprime les zéros de fin et trouve le symbole monétaire approprié pour les devises les plus courantes:

{{10.00 | money: USD}} a 10 $

{{10.00 | money: EUR}} à 10 €

/**
 * @ngdoc filter
 * @name money
 * @kind function
 *
 * @description
 * Formats a number as a currency (ie $1,234.56), removing trailing zeros and using the     real currency symbol when possible. When no currency symbol is provided, default
 * symbol for current locale is used.
 *
 * @param {number} amount Input to filter.
 * @param {string=} symbol Currency symbol or identifier to be displayed.
 * @returns {string} Formatted number. *
 */
app.filter('money', [ '$filter', '$locale', function (filter, locale) {
var currencyFilter = filter('currency');
var formats = locale.NUMBER_FORMATS;

var getCurrencySymbol = function (code) {
    switch (code.toUpperCase()) {
        case 'EUR': //Euro
            return '€';

        case 'USD': //Dólar americano
        case 'MXN': //Peso mejicano
        case 'CAD': //Dólar de Canadá
        case 'AUD': //Dólar australiano
        case 'NZD': //Dólar neozelandés
        case 'HKD': //Dólar de Hong Kong
        case 'SGD': //Dólar de Singapur
        case 'ARS': //Peso argentino
            return '$';

        case 'CNY': //Yuan chino
        case 'JPY': //Yen japonés
            return '¥';

        case 'GBP': //Libra esterlina
        case 'GIP': //Libras de Gibraltar
            return '£';

        case 'BRL': //Real brasileño
            return 'R$';

        case 'INR': //Rupia india
            return 'Rp';

        case 'CHF': //Franco suizo
            return 'Fr';

        case 'SEK': //Corona sueca
        case 'NOK': //Corona noruega
            return 'kr';

        case 'KPW': //Won de Corea del Norte
        case 'KRW': //Won de Corea del Sur
            return '₩';

        default:
            return code;
    }
};

return function (amount, currency) {
    var value;
    if (currency) {
        value = currencyFilter(amount, getCurrencySymbol(currency));
    }
    else {
        value = currencyFilter(amount);
    }

    //Remove trailing zeros
    var regex = new RegExp("\\" + formats.DECIMAL_SEP + "0+", "i");
    return value.replace(regex, '');
};
} ]);
3
Javier Marín

Pour AngularJS 1.2Vous pouvez simplement combiner les filtres number et currency

app.filter('noFractionCurrency', ['numberFilter', 'currencyFilter', function(numberFilter, currencyFilter) {
        return function(input, symbol) {
            var amount = numberFilter(input);
            return symbol + amount;
        };
    }]);
3
Marwan Aouida

Si vous utilisez angular-i18n (bower install angular-i18n), vous pouvez utiliser un décorateur pour modifier les valeurs par défaut dans les fichiers de paramètres régionaux, comme suit:

$provide.decorator('$locale', ['$delegate',
  function ($delegate) {
    $delegate.NUMBER_FORMATS.PATTERNS[1].maxFrac = 0;
    $delegate.NUMBER_FORMATS.PATTERNS[1].minFrac = 0;
    return $delegate;
}]);

Notez que cela s’appliquerait à toutes les utilisations du filtre de devise dans votre code.

2
Dormouse

J'ai légèrement modifié le filtre posté par @Liviu T. pour accepter les devises avec le symbole après le nombre et un certain nombre de décimales:

app.filter('noFractionCurrency',
[ '$filter', '$locale', function(filter, locale) {
  var currencyFilter = filter('currency');
  var formats = locale.NUMBER_FORMATS;
  return function(amount, num, currencySymbol) {
    if (num===0) num = -1;
    var value = currencyFilter(amount, currencySymbol);
    var sep = value.indexOf(formats.DECIMAL_SEP)+1;
    var symbol = '';
    if (sep<value.indexOf(formats.CURRENCY_SYM)) symbol = ' '+formats.CURRENCY_SYM;
    return value.substring(0, sep+num)+symbol;
  };
} ]);

Par exemple: 

{{10.234 | noFractionCurrency:0}}
{{10.55555 | noFractionCurrency:2}}

Les sorties:

$10
$10.56

Démo

2
bertslike

Exactement ce dont j'avais besoin!

J'ai ajouté une condition pour simplement remplacer le filtre monétaire d'Angular et utiliser simplement une version modifiée du filtre vu ci-dessus par @Tom. Je suis sûr qu'il existe de meilleures façons de le faire, mais cela semble bien fonctionner pour moi jusqu'à présent.


'use strict';
angular.module('your-module')
  .filter('nfcurrency', [ '$filter', '$locale', function ($filter, $locale) {
    var currency = $filter('currency'), formats = $locale.NUMBER_FORMATS;
    return function (amount, symbol) {
      var value = currency(amount, symbol), valArr = value.split(formats.DECIMAL_SEP);
      if(parseInt(valArr[(valArr.length - 1)]) > 0) {
        return value;
      } else {
        return value.replace(new RegExp('\' + formats.DECIMAL_SEP + '\d{2}'), '');
      }
    };
  }]);

2
Smccullough

Et ici si vous voulez arrondir à 1000 $ près: Démo live : 

var app = angular.module('angularjs-starter', []);

app.filter('noFractionRoundUpCurrency',
    [ '$filter', '$locale', function(filter, locale) {
      var currencyFilter = filter('currency');
      var formats = locale.NUMBER_FORMATS;
      return function(amount, currencySymbol) {
        var value = currencyFilter(amount, currencySymbol);
        var sep = value.indexOf(formats.DECIMAL_SEP);
        if(amount >= 0) { 
                    if (amount % 1000 < 500){
                        return '$' + (amount - (amount % 500));
                    } else {
                        return '$' + (amount - (amount % 500) + 500);          
                    }

        }
        else{
                    if (-amount % 1000 < 500){
                        return '($' + (-amount - (-amount % 500)) + ')';
                    } else {
                        return '($' + (-amount - (-amount % 500) + 500)+ ')';          
                    }
        }
      };
    } ]);

app.controller('MainCtrl', function($scope) {

});
2
David Dehghan

En angulaire 4+

{{totalCost | currency : 'USD' : 'symbol' : '1.0-0' }}
0
Andrew Koper