web-dev-qa-db-fra.com

Monnaie angulaire en Js, symbole euro après

Comment déplacer le symbole euro de l'avant de la valeur à après?

Exemple:

{{product.price | currency : "€"}} produira € 12.00

mais je voudrais 12.00 €

javascriptangularjscurrency
31
corsaro

Vous n'avez pas à pirater le filtre de devise!

AngularJS a un excellent support pour i18n/l10n. Le filtre monétaire utilise le symbole monétaire par défaut du service de paramètres régionaux et le positionne en fonction des paramètres régionaux.

Il s’agit donc de prendre en charge et de définir les paramètres régionaux appropriés.

<script src="i18n/angular-locale_de-de.js"></script>

Si vous utilisez npm ou bower, tous les paramètres régionaux sont disponibles via le angular-i18npackage .

<span>{{ product.price | currency }}</span>

va maintenant produire la sortie suivante:

65,95 €

Prise en charge de plusieurs localisations

Si vous souhaitez prendre en charge plusieurs localisations, soyez prudent avec le symbole monétaire car il change en la devise par défaut des paramètres régionaux utilisés. Mais 65,95 € sont différents de $65,95. Indiquez le symbole monétaire comme paramètre pour être sûr:

<span>{{ product.price | currency:'€' }}</span>

Dans de-de, le résultat serait toujours 65,95 €, mais si l'emplacement est eg. en-us il s'agirait de €65.95 (malgré quelques autres énonciations le format correct pour afficher les prix en euros en anglais ).

Pour en savoir plus sur angular et sur i18n/l10n, reportez-vous au guide du développeur .

56
Frederik Kammer

Les solutions proposées sont toutes sales.

au début, le filtre permet changer le symbole en l'ajoutant comme paramètre:

{{product.price | currency : "€"}}

mais la bonne façon consiste à localiser votre application comme suggéré par @Andreas si vous localisez votre application, par exemple avec les paramètres régionaux italiens (it-it) dans votre application, il vous suffit d'appeler le filtre pour obtenir le signe €.

{{product.price | currency }}

Les paramètres régionaux italiens placent le symbole de l'euro avant la valeur monétaire ..__ Vous pouvez modifier la valeur des paramètres régionaux ou bien la remplacer, comme proposé dans la réponse liée suivante:

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

vous pouvez remplacer les paramètres régionaux en mettant votre symbole monétaire (\ u00A4) en tant que préfixe ou suffixe pour les valeurs positives et négatives.

app.config(['$provide', function($provide) {
    $provide.decorator('$locale', ['$delegate', function($delegate) {
      if($delegate.id == 'it-it') {
            $delegate.NUMBER_FORMATS.PATTERNS[1].negPre = '\u00A4\u00a0-';
            $delegate.NUMBER_FORMATS.PATTERNS[1].negSuf = '';
            $delegate.NUMBER_FORMATS.PATTERNS[1].posPre = '\u00A4\u00a0';
            $delegate.NUMBER_FORMATS.PATTERNS[1].posSuf = '';
      }
      return $delegate;
    }]);
  }]);

donc après cette instruction le filtre:

{{product.price | currency}}

produira la sortie suivante

€ 12
4
Zauker

utilisez cette astuce.

<div>{{product.price | currency : '' }} €</div>
3
drskur

Angularjs a un grand support pour l'internationalisation et la localisation . L'application de l'internationalisation et la localisation dépend du domaine d'application de votre application . Par exemple, si votre application ne supporte que l'euro, vous n'avez besoin que de la localisation pour l'euro toute la monnaie et sa mise en forme.

Dans une telle situation (en supposant que votre situation soit similaire à celle décrite ci-dessus), vous pouvez créer une configuration d'application et définir les paramètres régionaux comme localisation souhaitée à l'aide de certains décorateurs. Une fonction de décorateur intercepte la création d'un service, ce qui lui permet de remplacer ou de modifier le comportement du service.

angular
  .module('app', [])
  .config(['$provide', function($provide) {
    $provide.decorator('$locale', ['$delegate', function($delegate) {
      $delegate.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: 0,
          maxFrac: 1,
          posPre: '\u00A4',
          posSuf: '',
          negPre: '(\u00A4',
          negSuf: ')',
          gSize: 3,
          lgSize: 3
        }],
        CURRENCY_SYM: '€'
      }
      return $delegate;
    }]);
  }])
  .controller('appController', ['$scope', function($scope) {
    $scope.price = 20.55;
  }])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="appController">
    Price : {{price | currency}}
  </div>
</div>

La configuration ci-dessus montre toutes les valeurs possibles pour les paramètres décimaux et monétaires . Vous pouvez modifier en fonction de vos besoins au niveau de l'application.

Si vous ne voulez pas que l'effet soit mieux dans l'application complète, optez pour une directive

2
Samuel J Mathew

C'est une question assez ancienne, elle est différente ces jours-ci… Peut-être que c'était aussi à l'époque… 

Donc, si quelqu'un d'autre trouve cela ..

Toutefois, vous devez inclure les paramètres régionaux appropriés pour obtenir le format de devise correct dans le filtre de devises.

Vérifiez la documentation angulaire, par exemple le format de devise néerlandaise est de 5,00 €, tandis que l'anglais est de 5,00 € et l'américain de 5,00 €

1
Samantha A

Utiliser locale (comme expliqué dans la réponse de ce fil de discussion - At Monnaie angulaire en Js, symbole euro après ) semble être le plus manière correcte de le faire, mais cela ne semble pas offrir la possibilité de placer le symbole monétaire ou le nom où vous le souhaitez par rapport à la valeur à laquelle vous faites référence. Si vous devez avoir votre symbole monétaire après votre valeur, vous pouvez avoir un champ product.currency séparé et l’interpoler après (ou avant) votre valeur de prix. 

Donc, si vous avez product.price = 40 et product.currency = '€', vous pouvez l'afficher avec 40 € avec {{product.price}} {{product.currency}}. Ou 40 € en inversant les champs: {{product.currency}} {{product.price}}. 

Si vous le faites, vous voudrez probablement formater les valeurs product.price via le canal décimal ( https://angular.io/api/common/DecimalPipe ). - Donc "40,00 €" serait: {{product.amount | number:'2.2-2'}} {{product.currency}}. 

fyi - dans ce cas, j'aurais probablement un champ séparé product.currency et product.currencySymbol (par exemple, "USD" et "$" respectivement), mais vous vous intéresserez davantage à la fonctionnalité de la locale comme indiqué dans l'autre réponse que je vous renvoie. au dessus de. Mais si vous devez placer le nom ou le symbole de la devise à un emplacement différent de celui que Angular vous laissera via ses canaux natifs, et souhaitez utiliser une devise spécifique à un enregistrement ou à un jeu avec lequel vous travaillez. sans coder en dur son symbole ou son nom sur la page (par exemple, si vous affichez plusieurs devises), c'est une façon de le faire de manière dynamique.

0
Mugshep