Search code examples
javascriptangularjsangular-filters

AngularJs Dynamic currency


I am working on a requirement to change the currency displayed on a record based on currency.

The symbol of the currency is not a problem, as I can change it using

{{value | currency:"$"}}

But the problem is with thousand and decimal separator.

For euros: 1,00.00 €
For dollars: 1.00,00 $

I tried some solutions. But none of them helped, which makes my question repetitive.

I tried to load the script using following code with localization changes. But it did not help.

var s = document.createElement("script");
s.type = "text/javascript";
s.src = "../js/switzerland.js";
document.getElementsByTagName("head")[0].appendChild(s)

The script element reflects in the header. But the currency does not change. Any solution?


Solution

  • To achieve expected result , use below

    HTML:

    <html>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    
    <body>
    
    <div ng-app="myApp" ng-controller="myCtrl">
    <div>{{curr | currency:"$"}}</div>
      <div>{{curr.toLocaleString("es-ES",{minimumFractionDigits: 2})}}€</div>
    
    </div>
    
    
    
    </body>
    </html>
    

    JS:

    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.curr = 1230.00;
    
    });
    

    http://codepen.io/nagasai/pen/kXdAXg