AngularJS:扩展内置过滤器

时间:2012-11-09 02:43:02

标签: angularjs

我想修改currency过滤器以处理输入值中的自定义货币格式。

(例如,AUD 3.00 -> $3.00)。

一种选择是从头开始编写我自己的过滤器。然而,这似乎有很多重复,考虑到现有的过滤器非常好,我只需先从前面修剪几个字符。

理想情况下,我会有这样的事情:

.filter('money', function($filters) {
    return function(text){
        var currency = text.substring(4)
        return $filters('currency')(currency)
    };
});

是否可以:

  • 从另一个过滤器调用一个过滤器?
  • 访问内部方法(例如formatNumber()显示here

对此我还有哪些其他选择?

3 个答案:

答案 0 :(得分:28)

  • 从另一个过滤器调用一个过滤器?

是的,我找到的最佳解决方案是创建一个新过滤器:

angular.module('ui.filters').filter('customCurrency',
    [ '$filter', function(filter) {
      var currencyFilter = filter('currency');
      return function(amount, currencySymbol) {
        return currencyFilter(amount.substr(4), currencySymbol);
      }
    } ]);

这会改变像" 30.00澳元"至" $ 30.00 "

从我尝试过的版本1.0.1开始,你不能覆盖过滤器。我尝试使用相同的名称创建一个过滤器,并尝试引用原始过滤器导致无限循环。

Here是一个值得考虑的好点:

  

但是,我建议不要这样做 - 即使这是允许的。   预定义过滤器是AngularJS的公共API。如果有些部分怎么办?   AngularJS在内部使用其中一些,或者有一天你安装一些   依赖于该过滤器的附加组件?

请参阅also,基本上是相同的结论,即使我认为操作系统并不真正需要自定义过滤器。

  • 访问内部方法(例如,formatNumber())?

如果没有公开该功能,那么作者认为它不是一个他们想要提供的公共API。作者可能有一个特定的实现特定功能,可能不会立即显而易见。

PS :模块是您需要过滤器所需的模块。我将不同模块中的某些功能分开,并在构建主模块时需要它们

var App = angular.module('App', [ 'ui' ]);

答案 1 :(得分:1)

最好的方法是,

<div> {{amount | currency:'$'}} </div>

你的HTML中的

。 这将自动删除与货币类型对应的前几个字符,并将其替换为字符串参数&#39; $&#39;你过关了。

答案 2 :(得分:0)

  

Angular的货币过滤器允许您使用区域设置服务中的默认货币符号,或者您可以为过滤器提供自定义货币符号。如果您的应用仅在一个区域设置中使用,则可以依赖默认的货币符号。但是,如果您预计其他区域设置中的查看者可能会使用您的应用,则应提供自己的货币符号以确保理解实际值。

     

例如,如果要使用包含货币过滤器的以下绑定显示1000美元的帐户余额:{{1000 |货币}},您的应用目前处于en-US区域设置。 '$ 1000.00'将会显示。但是,如果位于不同本地(例如日本)的某人查看您的应用,则她的浏览器会将区域设置指定为ja,而将显示“¥1000.00”的余额。这会让你的客户感到不安。

     

在这种情况下,您需要通过在配置过滤器时为货币过滤器提供货币符号作为参数来覆盖默认货币符号,例如USD $ 1,000.00。这样,Angular将始终显示“USD $ 1000”的余额,并忽略任何区域设置更改。

请参阅有关本地化的说明:http://docs.angularjs.org/guide/i18n