Multiple AngularJS currency formats, using i18n (Euro, DE)

Question

My angular app needs to display currencies in different formats for example: $, ￡, 2.105,10€ - euro sign after + different separators - which can be achieved by including the i18n angular-locale_de-de.js variant.

The problem is I have to display the format based on the JSON's locale value, which happens once the app has initialized, so the currency remains the default regardless of what the JSON says and there doesn't seem to be a way to display the currency as - $12,000 + the i18n docs say that you can only use one locale.

A common practice is to use angular-locale- + $localevar +.js in the index file, again my app doesn't know about the locale until the ajax response and uses grunt to build the app. how do I tackle this problem?

Any alternate libraries I could use? really frustrated with how difficult angular makes it to handle multiple formats.

Here's a fiddle http://jsfiddle.net/awsd2s5r/

Answer 1

If you only handle a few locales and don't mind the overhead, just include every locale file needed and use the plugin angular-dynamic-locale to reload the language once you received the ajax response by doing something like :

tmhDynamicLocale.set(ajax_reply.locale)

If you really do care about performance, you could additionally load needed locales on the fly using a filter like this one :

(function () {
    'use strict';

    angular.module('app.filter').filter('loadScript', [ '$q', function($q) {
        var loaded = [];
        return function get(link) {
            if (loaded.indexOf(link) !== -1)
                return {};
            loaded.push(link);

            var deferred = $q.defer();

            var s = document.createElement('script');
            s.type = 'text/javascript';
            s.src = link;
            s.async = true;
            s.onreadystatechange = s.onload = function() {
                var state = s.readyState;
                if (!state)
                    deferred.resolve();
                else
                    deferred.reject();
            };

            document.body.appendChild(s);

            return deferred.promise;
        };
    }]);

})();