AngularJS : Extending built-in filters

Question

AngularJS : Extending built-in filters

I'd like to modify the currency filter to handle custom money formats in the input value.

(eg., AUD 3.00 -> $3.00).

One option is to write my own filter from scratch. However this seems like a lot of duplication, given the existing filter is great, I just need to trim a few characters off the front first.

Ideally, I'd have something like this:

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

Is is possible to either:

Call one filter from another?
Access the internal methods (eg, formatNumber() shown here

What other options are open to me for this?

angularjs

Answer 1

Call one filter from another?

Yes and the best solution I found was to create a new filter:

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

This transforms values like "AUD 30.00" to "$30.00"

You cannot, from what I tried, as of version 1.0.1 override a filter. I tried to create a filter using the same name and trying to reference the original filter causes an infinite loop.

Here is an excellent point to consider:

However, I would suggest not doing so - even if that is allowed. Predefined filters are the public API of AngularJS. What if some parts of AngularJS use some of them internally or one day you install some add-on which depends on that filter?

See also, basically the same conclusion even though I believe op didn't really need a custom filter.

Access the internal methods (eg, formatNumber())?

If the function is not exposed then the authors deemed it wasn't a public api they wanted to make available. The authors might have a particular implemetation specific function that might not be obvious right away.

PS: The module is whatever you need the filter to be in. I separate some functionality in different modules and require them when I build my main module

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

Answer 2

Angular's currency filter allows you to use the default currency symbol from the locale service, or you can provide the filter with a custom currency symbol. If your app will be used only in one locale, it is fine to rely on the default currency symbol. However, if you anticipate that viewers in other locales might use your app, you should provide your own currency symbol to make sure the actual value is understood.

For example, if you want to display account balance of 1000 dollars with the following binding containing currency filter: {{ 1000 | currency }}, and your app is currently in en-US locale. '$1000.00' will be shown. However, if someone in a different local (say, Japan) views your app, her browser will specify the locale as ja, and the balance of '¥1000.00' will be shown instead. This will really upset your client.

In this case, you need to override the default currency symbol by providing the currency filter with a currency symbol as a parameter when you configure the filter, for example, USD$1,000.00. This way, Angular will always show a balance of 'USD$1000' and disregard any locale changes.

See the notes on localization: http://docs.angularjs.org/guide/i18n

Answer 3

The best way to do this is,

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

in your html. This will automatically rip off the firt few characters that correspond to the currency type. And replace with the string argument '$' you pass.