angular.js - wrapping the currency symbol and decimal numbers in spans

Question

Can you possibly do something like this in angular?

enter image description here

It's not quite possible to do this, as doesn't parse tags or something

{{ 10000 | currency:"$" }}

http://plnkr.co/edit/WluYoe2Ltmhmhvr8BBWX?p=preview

let alone somehow separate decimal number..

The ideal result would be

1 000 000,00€

It's not really possible to do with any filter settings is it..?

I could try and modify angular's currency filter and the formatNumber function, but it still would take it as a text rather than a span element.

// edit you can actually do this http://plnkr.co/edit/dcEhHi8sp43564ZvC4D1?p=preview

$'">

still clueless about decimals though

score 13 · Answer 1 · edited May 23 '17 at 12:19

13

You can create a custom filter

app.filter('euro', function () {
    return function (text) {
        text = text.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1 ");
        var t = text + '<span class="desc">,00</span><span class="cur">€</span>';
        return t;
    };
});

<span ng-bind-html-unsafe="1000000 | euro"></span>

The result will be

1 000 000,00€

Working Demo

(The regex is posted by @Paul Creasey in his answer https://stackoverflow.com/a/1990554/304319)

edited May 23 '17 at 12:19

Community

1
1

answered Sep 12 '13 at 14:55

zs2020

53,766
29
154
219

1

Yeah but that wouldn't work with $locale. With $locale the currency symbol might be on the first place, decimal separator could be a dot, or there could be no decimals at all etc.. What you posted is pretty much the same I could do with `10000,00€` without any angular filters – fxck Sep 12 '13 at 15:01

fxck · Accepted Answer · 2013-09-12T15:12:29.993

It's actually possible to do this

$'">

or wrap it around the native currency filter like this

app.filter('currencys', ['$filter', '$locale', 
    function($filter, $locale) {
        return function (num) {
            var sym = $locale.NUMBER_FORMATS.CURRENCY_SYM;
            return $filter('currency')(num, '<span>'+ sym +'</span>');
        };
    }
]);

and then use it like this

score 4 · Answer 3 · answered Sep 12 '13 at 15:06

4

Some locales have the currency sign prefixed, some postfixed, e.g. "one hundred euros" would be rendered "€ 100" or "100 €". What then?

If you don't mind doing some parsing, however read on:

The $locale service contains the symbols required for currency formatting:

$locale.NUMBER_FORMATS.CURRENCY_SYM
$locale.NUMBER_FORMATS.DECIMAL_SEP

(And there is more detailed info in $locale.NUMBER_FORMATS.PATTERNS[] - the value at position [1] is for currencies)

You could create a directive that uses the currency filter to obtain the initial formatted string, e.g. "1 000 000,50 €" then search for $locale.NUMBER_FORMATS.CURRENCY_SYM and replace it with {{ $locale.NUMBER_FORMATS.CURRENCY_SYM }}, do something similar for the decimal separator and then set the innerHTML of an element.

answered Sep 12 '13 at 15:06

Nikos Paraskevopoulos

39,514
12
85
90

Doesn't `$locale` store the value for the user's current locale? As in displaying euro to someone in different locale may put it in front of the value. Its not specific to the currency, but the user. – TheSharpieOne Sep 12 '13 at 15:15
`$locale` keeps a data structure describing the current locale as understood by Angular. Never wrote that the format depends on currency. – Nikos Paraskevopoulos Sep 12 '13 at 15:22
So it could show `€1,000.00` or `1.000,00$` depending on locale – TheSharpieOne Sep 12 '13 at 15:25
Yes. And unfortunately there is another problem, the separation of user locale and system currency. Explain: I am greek so the currency format is "1.234,56 ¤" (¤ is whatever the currency is). For greek locale, this is €. What if I am buying form the US, so the currency is $, but still my prefered locale is el? In this case Angular's `$locale` is inadequate - would display "one hundrend dollars" as "100 €". Perhaps in this case you must hack the `$locale.NUMBER_FORMATS.CURRENCY_SYM`. – Nikos Paraskevopoulos Sep 12 '13 at 15:31

angular.js - wrapping the currency symbol and decimal numbers in spans

3 Answers3

Linked