Number Format in AngularJS

Question

I have this number.

20.79

I need see the number as

20,79

Or

1.200,76 €

How can I change the . by , and add € currency?

Thanks!

Solution

app.filter('customCurrency', function(){
    return function(input, symbol, place){
        if(isNaN(input)){
            return input;
        } else {
            var symbol = symbol || '$';
            var place = place === undefined ? true : place;
            if(place === true){
                return symbol + input;
            } else{
                var new_input = input.replace(".", ",");
                return new_input + symbol;
            }
        }
    }
})

Thanks, I have seen this before, but I don't see how can I change it. — Diego
– Diego, Commented Dec 12, 2016 at 14:10

hd84335 · Accepted Answer · 2016-12-13 20:25:26Z

3

You can do it by simply changing your Locale to match the European currency:

Import this library

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.6.0/angular-locale_de-de.js"></script>

In your html

<div>{{ myNumber | currency: '€' }}</div>

In your controller

$scope.myNumber = 1220.79;

Result: 1.220,79 €

Please check it: JSFiddle Demo

edited Dec 13, 2016 at 20:25

answered Dec 12, 2016 at 15:57

hd84335

10.2k5 gold badges39 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

Use the currency filter:

In your Angular controller:

$scope.myNumber = 20.79;

In your HTML page:

<div>{{myNumber | currency}}</div>

Update: If you need to display in €, 2 options:

Set your locale to your country: <script src="i18n/angular-locale_de-de.js"></script> (best option).
Display it without currency filter: {{(myNumber | number: 2) + " €"}}.

Demo on JSFiddle.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 12, 2016 at 14:09

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

Collectives™ on Stack Overflow

Number Format in AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related