After receiving a UX design that specifies the currency symbol should be displayed in gray and the decimal value in black, I took to Google to figure out how to implement it. My solution was creating a straightforward filter:
.filter('tnCurrency', ['$filter', function($filter) {
return function(input, symbol, decimal) {
var amt = $filter('currency')(input, '', decimal);
return '<span class="tn-currency-symbol">' + symbol + '</span><span class="tn-currency-amt">' + amt + '</span>';
};
}]);
Usage:
<span ng-bind-html="total.amt | tnCurrency:'$':2"></span>
Contemplating for a while now...is this implementation better off as a directive or is sticking with a filter the way to go?