將其他貨幣格式添加到AngularJS

Question

如何在AngularJS中添加其他貨幣格式，如歐元到貨幣過濾器？

<div ng-app> 
    <p> 
     <label>Enter Cost</label> 
     <input type="text" ng-model="cost" /> 
    </p> 

    <p> {{ cost | currency }} </p> 
</div> 

Answer 1

您可以選擇創建你所選擇的貨幣自定義過濾器。但根據Angulars Documentation on the Currency Filter，您可以簡單地爲您的貨幣提供符號，貨幣縮寫和小數位格式化程序。

在HTML模板綁定：

{{ currency_expression | currency : symbol : fractionSize}}  

在JavaScript：

$filter('currency')(amount, symbol, fractionSize) 

Answer 2

您可以在currency:之後通過html entities。這裏有幾個例子。

Item Price<span style="font-weight:bold;">{{price | currency:"&euro;"}}</span> 
Item Price<span style="font-weight:bold;">{{price | currency:"&yen;"}}</span> 

從文檔，此過濾器的格式是

{{currency_expression |貨幣：符號：fractionSize}}

Answer 3

<div ng-app> 
    <p> 
     <label>Enter Cost</label> 
     <input type="text" ng-model="cost" /> 
    </p> 
    <!-- Change USD$ to the currency symbol you want --> 
    <p> {{cost| currency:"USD$"}} </p> 
</div> 

Answer 4

正如documentation描述，只需添加你的過濾器後，要使用的貨幣符號。

<p> {{ cost | currency : '€' }} </p>

Answer 5

// Setup the filter 
app.filter('customCurrency', function() { 

    // Create the return function and set the required parameter name to **input** 
    // setup optional parameters for the currency symbol and location (left or right of the amount) 
    return function(input, symbol, place) { 

    // Ensure that we are working with a number 
    if(isNaN(input)) { 
     return input; 
    } else { 

     // Check if optional parameters are passed, if not, use the defaults 
     var symbol = symbol || '$'; 
     var place = place === undefined ? true : place; 

     // Perform the operation to set the symbol in the right location 
     if(place === true) { 
     return symbol + input; 
     } else { 
     return input + symbol; 
     } 

    } 
    } 

然後通過任何你需要的貨幣。

<ul class="list"> 
    <li>{{example1 | customCurrency}} - Default</li> 
    <li>{{example1 | customCurrency:'€'}} - Custom Symbol</li> 
    <li>{{example1 | customCurrency:'€':false}} - Custom Symbol and Custom Location</li> 
</ul>