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

Question

Can you possibly do something like this in angular?

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

{{ 10000 | currency:"<span>$</span>" }}

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

let alone somehow separate decimal number..

The ideal result would be

1 000 000<span class="dec">,00</span><span class="cur">€</span>

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

<p ng-bind-html-unsafe="10000 | currency:'<span>$</span>'"></p>

still clueless about decimals though

Answer 1

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)

Answer 2

It's actually possible to do this

<p ng-bind-html-unsafe="10000 | currency:'<span>$</span>'"></p>

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

<span ng-bind-html-unsafe="10000 | currencys"></span>

Answer 3

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 <span>{{ $locale.NUMBER_FORMATS.CURRENCY_SYM }}</span>, do something similar for the decimal separator and then set the innerHTML of an element.