Question

如何在AngularJS中添加欧元等货币过滤器等其他货币格式？

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

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

Answer 1

您可以在html entities之后传递currency:。以下是几个例子。

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 2

<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 3

如documentation所述，只需在过滤器后添加所需的货币符号即可。

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

Answer 4

您可以选择为您选择的货币创建自定义过滤器。但是根据Angulars Documentation on the Currency Filter，您可以简单地为您的货币提供符号，货币缩写和小数位格式化程序。

在HTML模板绑定中：

{{ currency_expression | currency : symbol : fractionSize}}

在JavaScript中：

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

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>

将其他货币格式添加到AngularJS

5 个答案: