web-dev-qa-db-ja.com

Angular Js通貨、後のユーロ記号

シンボルユーロを値の前から後ろに移動する方法は？

例：

{{product.price | currency : "€"}}は€ 12.00を生成します

12.00 €が欲しい

javascriptangularjscurrency
32
corsaro

通貨フィルターをハックする必要はありません！

AngularJSはi18n/l10nを強力にサポートしています。通貨フィルターは、ロケールサービスのデフォルトの通貨記号を使用し、ロケール設定に基づいて配置します。

したがって、適切なロケールのサポートと設定がすべてです。

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

npmまたはbowerを使用している場合、すべてのロケールはangular-i18npackage で利用できます。

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

これで、次の出力が生成されます。

65,95 €

複数のローカライズのサポート

複数のローカライズをサポートする場合は、通貨記号が使用されるロケールのデフォルト通貨に変わるため、通貨記号に注意してください。ただし、65,95 €は$65,95とは異なります。安全のためにパラメーターとして通貨記号を指定します。

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

de-deでは、出力は65,95 €のままですが、場所がたとえばen-usは€65.95になります（他の言い回しにもかかわらず 英語でユーロ価格を表示するための正しい形式 ）。

angularおよびi18n/l10nの詳細については、 開発者ガイド を参照してください。

59
Frederik Kammer

通貨フィルターではできません。独自に作成することも、単に番号フィルターを使用することもできます。

{{(produce.price | number:2) + "€"}}

17
Reactgular

提案されたソリューションはすべて汚れています。

最初に、フィルターは、シンボルをパラメーターとして追加することにより、シンボルの変更を許可します。

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

しかし、正しい方法は、アプリ内でイタリアのロケール設定（it-it）などでアプリをローカライズする場合、@ Andreasが示唆するようにアプリをローカライズすることです。

{{product.price | currency }}

イタリアのロケール設定では、通貨値の前にユーロ記号を置きます。以下のリンクされた回答で提案されているように、cheロケール値を変更するか、はるかに優れたオーバーライドを行うことができます。

なぜAngularJS通貨フィルターは負の数値を括弧でフォーマットするのですか？

ロケール設定をオーバーライドして、通貨記号（\ u00A4）を正の値と負の値の接頭辞または接尾辞として置くこともできます。

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

したがって、この命令の後、フィルターは：

{{product.price | currency}}

フォロー出力を生成します

€ 12
4
Zauker

このトリックを使用してください。

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

Angularjsは、国際化とローカリゼーションを強力にサポートしています。国際化とローカリゼーションのアプリケーションは、アプリケーションの範囲に依存します。たとえば、アプリケーションがユーロのみをサポートする場合、ユーロのローカライズのみが必要であり、すべての通貨とその書式設定は必要ありません。

このような状況（状況が上記に似ていると仮定）で、アプリ構成を作成し、いくつかのデコレーターを使用して必要なローカライズとしてロケールを設定できます。デコレータ関数は、サービスの作成をインターセプトし、サービスの動作をオーバーライドまたは変更できるようにします。

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>

上記の構成は、小数および通貨の設定で可能なすべての値を示しています。アプリレベルの要件に応じて変更できます。

効果をアプリケーション全体に良くしたくない場合は、ディレクティブを使用することです

2
Samuel J Mathew

これはかなり古い質問です。最近は異なっています。

だから誰かがこれを見つけたら….

ただし、通貨フィルターで正しい通貨形式を取得するには、正しいロケールを含める必要があります。

angularのドキュメントをご覧ください。たとえば、オランダの通貨フォーマットは€5,00ですが、英語は5,00€、アメリカは€5.00です。

1
Samantha A

私はフランスのプロジェクト（本番）でこのソリューションを使用します（常に5.00€を表示する必要があり、5.00€を表示しないでください）：

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

[〜＃〜] demo [〜＃〜]

あまりにも早く投票する前に、この投稿の本当の質問（Angular Js currency、symbol euro after）を読んでください!!!!!

0
sgrillon

locale（このスレッドの回答で説明されているように、 Angular Js currency、symbol euro after ）を使用すると、 最も 正しい方法ですが、参照している値に対して、通貨記号または名前を希望する場所に配置する柔軟性を提供していないようです。値の後に通貨記号を付ける必要がある場合は、個別のproduct.currencyフィールドを用意し、価格値の後（または前）に補間することができます。

したがって、product.price = 40とproduct.currency = '€'がある場合、{{product.price}} {{product.currency}}を使用して40€と表示できます。または、フィールドを逆にして€40：{{product.currency}} {{product.price}}。

おそらく、product.price値を10進パイプ経由でフォーマットする必要があります（ https://angular.io/api/common/DecimalPipe ）。 -したがって、「40.00€」は{{product.amount | number:'2.2-2'}} {{product.currency}}になります。

fyi-この場合、おそらく個別のフィールドproduct.currencyとproduct.currencySymbol（たとえば、それぞれ「USD」と「$」）がありますが、その後、localeは、上記の他の回答で参照されています。ただし、通貨名または記号を、値に関連する別の場所に配置する必要がある場合、Angularはネイティブパイプを介して行うことができ、特定の通貨を使用したいページ上でシンボルや名前をハードコーディングせずに作業中のレコードを記録または設定します（たとえば、表示する通貨が複数ある場合）。これは動的に行う方法の1つです。

0
Mugshep