角Js貨幣，后象征歐元

Question

如何將歐元符號從值的前面移到后面？

例：

{{product.price | currency : "€"}} {{product.price | currency : "€"}}將產生€ 12.00

但我想要12.00 €

Answer 1

您不必破解貨幣過濾器！

AngularJS對i18n / l10n有很好的支持。 貨幣過濾器使用語言環境服務中的默認貨幣符號，並根據語言環境設置對其進行定位。

因此，所有這些都是關於支持和設置正確的語言環境的。

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

如果您使用npm或bower則可以通過angular-i18n 軟件包獲得所有語言環境。

<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的更多信息，請參閱開發人員指南 。

Answer 2

您不能使用貨幣過濾器。 您可以編寫自己的代碼，也可以只使用數字過濾器。

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

Answer 3

用這個把戲。

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

Answer 4

提出的解決方案都是骯臟的。

首先，過濾器允許更改符號，方法是將其添加為參數：

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

但是正確的方法是按照@Andreas的建議對應用程序進行本地化，如果您對應用程序進行本地化（例如，在應用程序內部使用意大利語言環境設置（it-it）），則只需調用過濾器即可獲得€符號。

{{product.price | currency }}

意大利區域設置將歐元符號放在貨幣值之前。 您可以更改che locale值，或者更好地按照以下鏈接的答案中的建議覆蓋它們：

為什么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

Answer 5

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: '\¤', posSuf: '', negPre: '(\¤', 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> 

上面的配置顯示了十進制和貨幣設置的所有可能值。 您可以根據需要在應用程序級別進行更改。

如果您不希望效果在整個應用程序中更好，那就去找一個指令

Answer 6

這是一個很老的問題，如今已經不一樣了。也許那時也是如此。

所以，如果有人找到這個。

但是，您需要包括正確的語言環境才能在貨幣過濾器中獲得正確的貨幣格式。

查看角度文件，例如荷蘭貨幣格式為€5,00，而英語為€5.00，而美國人為€5.00

Answer 7

我在法國的項目中（生產中）使用了此解決方案（ 它必須始終顯示5.00€，從不顯示€5.00 ）：

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

演示

請在降低投票速度之前閱讀本帖子的真實問題（ Angular Js貨幣，后為歐元符號 ）！

Answer 8

correct way to do it, but it doesn't seem to offer the flexibility to put the currency symbol or name where you want it relative to the value you're referencing to. 使用locale （如該線程答案中所述-以Angular Js貨幣表示，之后為euro ）似乎是正確的方法，但似乎無法靈活地將貨幣符號或名稱放在您希望它相對於您所引用的值。 如果需要在值后加上貨幣符號，則可以有一個單獨的product.currency字段，然后在價格值之前（或之前）進行插值。

因此，如果您有product.price = 40和product.currency = '€' ，則可以使用{{product.price}} {{product.currency}}將其顯示為40€。 或通過以下字段反轉40歐元： {{product.currency}} {{product.price}} 。

如果這樣做，您可能希望通過十進制管道設置product.price值的格式（ https://angular.io/api/common/DecimalPipe ）。 -因此，“ 40.00€”應為： {{product.amount | number:'2.2-2'}} {{product.currency}} {{product.amount | number:'2.2-2'}} {{product.currency}} 。

fyi-在這種情況下，我可能會有一個單獨的字段product.currency和product.currencySymbol （例如分別為“ USD”和“ $”），但是您會像在參考資料中所引用的那樣，更多地使用locale的功能我在上面鏈接的其他答案。 但是，如果您需要將貨幣名稱或符號放置在與Angular允許通過其本機管道進行操作的值不同的位置，並且想要使用特定於記錄或要使用的貨幣的貨幣無需在頁面上硬編碼其符號或名稱（例如，如果您要顯示多種貨幣），這就是動態進行編碼的一種方法。

Answer 9

您可以創建一個過濾器：

app.filter('euroFormat', function () {
    return function (input) {
        return input+' \u20AC';
    };
});

並將其應用於您的html代碼上：

<span>Price: {{product.price| euroFormat}}</span>