AngularJS currency filter: can I remove the .00 if there are no cents in the amount?

All we need is an easy explanation of the problem, so here it is.

I am following this: http://docs.angularjs.org/api/ng.filter:currency
When I type 1234.56 in the field then the output should be $1,234.56. But if I type in the input 1234 then the output is $1,234.00. I don’t want the decimal and the zeros to appear.
How can this be done?

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Add a new filter:

'use strict';

angular
    .module('myApp')
    .filter('myCurrency', ['$filter', function($filter) {
        return function(input) {
            input = parseFloat(input);
            input = input.toFixed(input % 1 === 0 ? 0 : 2);
            return '$' + input.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        };
    }]);

In your view:

<span>{{ '100' | myCurrency }}</span> <!-- Result: $100 -->
<span>{{ '100.05' | myCurrency }}</span> <!-- Result: $100.05 -->
<span>{{ '1000' | myCurrency }}</span> <!-- Result: $1,000 -->
<span>{{ '1000.05' | myCurrency }}</span> <!-- Result: $1,000.05 -->

Method 2

I prefer this answer as it keeps the commas to separate thousands:

Removing AngularJS currency filter decimal/cents

Method 3

If you want something quick and dirty, you can set the second parameter to the filter as such in order to trigger two decimal places when there are, in fact, cents to be shown:

{{amount | currency:undefined:2*(amount % 1 !== 0)}}

Quick caveat is that this only works roughly up to 10^14 since a loss of floating point precision will cause amount % 1 to return 0.

An alternative syntax, which works pretty much identically but is a little less understandable is 2*!!(amount % 1)

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply