AngularJS : Extending built-in filters

Question

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?

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' ]);