Angular Currency Filter – Symbol  added

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

I’m using angular’s currency filter and it seems to be outputting an extra symbol: Â.

The html:

{{totals.subtotal | currency}}
{{totals.tax | currency}}
{{totals.total | currency}}

The object totals:

var totals = {subtotal: 500, tax: 65, total: 565};

Output:

Â$500.00
Â$65.00
Â$565.00

Has anyone encountered this before? I’m using the latest angular 1.0.6

Update: It turns out the minification of angular caused this. When I included the non minified angular it fixed it.

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

Yeah confirmed that this is uglify.

If you build it with the ascii_only=true option then it seems to resolve the problem.

Method 2

Make sure you have this meta tag.

<meta charset="utf-8">

Method 3

It seems that when you minify Angular yourself with Uglify.js, and possibly when you combine it with other scripts into one concatenated file and then minify, this issue arises. To solve it you should include the pre-minified version of Angular in your project instead of the development version. I’m not sure if the problem is due to Uglify.js or Angular, but this is how I fixed it.

Method 4

Updating Uglify seems to resolve the issue together with

uglify({ 'ascii-only': true })

Method 5

If you build it with the ascii_only=true option then it seems to resolve the problem.

Here is what it should look like in your Gruntfile.js:

uglify:{ 
     options: { 
         output: {'ascii_only': true } 
     }
}

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