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?

score 29 · Accepted Answer · edited May 23 '17 at 10:29

29

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

edited May 23 '17 at 10:29

Community

1
1

answered Nov 09 '12 at 13:06

Liviu T.

23,584
10
62
58

Note for future readers: In newer versions you can now use $locale, look it up – Tim Wachter Oct 07 '15 at 08:39
Automatically when you call the filter `var capitalizeFilter = $filter('capitalize');` you got an error `Error: [$interpolate:interr]` can you tell me why? I'm using angular 1.5.1 – Pablo Apr 18 '16 at 19:52
@Pablo can you create a jsfiddle/plunk where you replicate the issue? I think this a separate question, try posting it as a new question with all the relevant details – Liviu T. Apr 18 '16 at 20:44
@LiviuT. following your philosophy in this [fiddle](//jsfiddle.net/webkod3r/fgb9y294/embed/js,html,result/) the filter does'n work because the `capitalize` call never occur. – Pablo Apr 20 '16 at 13:27
@LiviuT. Js Bin has a console to debug, I copied the code here and as I said the error appears. Click on this [JS Bin](https://jsbin.com/berola/edit?html,js,console,output) – Pablo Apr 20 '16 at 13:52
@Pablo capitalize filter doesn't come with angular – Liviu T. Apr 20 '16 at 15:50

score 1 · Answer 2 · edited Jan 26 '16 at 15:37

1

The best way to do this is,

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

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

edited Jan 26 '16 at 15:37

Mark Beleski

406
1
3
9

answered Feb 09 '15 at 06:22

BrightTyro

51
1
6

score 0 · Answer 3 · answered Nov 09 '12 at 16:40

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

thanks, but as I understand it, this won't work for me. I'm trying to format 'AUD 300' to '$300', not '300' to 'AUD$300', which is what I believe this example shows. — Marty Pitt, Nov 09 '12 at 22:08

AngularJS : Extending built-in filters

3 Answers3