CODEWITHSUNDEEP
vue.js
jgravois
jgravois

Reputation: 2579

Need a flexible currency filter in VueJS

I need to modify the currency filter to be able to dictate number of decimal places … i need 0, 2, and 4 decimal places in currency in different places … I am thinking a “ | flexCurrency: 4” but can’t find the necessary documentation to figure out how to override the currency filter. The filter I am in imagining in Angular looks like this:

.filter('flexCurrency', flexCurrencyFilter)

function flexCurrencyFilter($filter) {
        return function (input, decPlaces) {
            decPlaces = decPlaces || 0;

            // Check for invalid inputs
            if (isNaN(input) || !input || Math.abs(input) === 0 || (Math.abs(input) > 0 && Math.abs(input) < 1)) {
                return '-';
            }
            var out = input;

            //Deal with the minus (negative numbers)
            var minus = out < 0;
            out = Math.abs(out);
            out = $filter('number')(out, decPlaces);

            // Add the minus and the symbol
            if (minus) {
                return '( $' + out + ')';
            } else {
                return '$' + out;
            }
        };
    }

Upvotes: 1

Views: 4698

Answers (1)

Jeff
Jeff

Reputation: 25221

The currency filter is in the source code, just adapt it to take an extra arg. This should work:

  flexCurrency (value, currency, decimals) {
    value = parseFloat(value)
    if (!isFinite(value) || (!value && value !== 0)) return ''
    currency = currency != null ? currency : '$'
    var stringified = Math.abs(value).toFixed(decimals)
    var _int = stringified.slice(0, -1 - decimals)
    var i = _int.length % 3
    var head = i > 0
      ? (_int.slice(0, i) + (_int.length > 3 ? ',' : ''))
      : ''
    var _float = stringified.slice(-1 - decimals)
    var sign = value < 0 ? '-' : ''
    return sign + currency + head +
      _int.slice(i).replace(digitsRE, '$1,') +
      _float
  },

Upvotes: 1

Related Questions