mm1975 mm1975 - 11 months ago 60
AngularJS Question

Dynamically load i18n Angular locale depending on select

I use an select with a list of all countries, populating with an external json-File.
In this File, I have a key for the i18n locale 'language - Country' for e.g. 'en-us'.

I get the locale after updating the select.
Is there a way to dynamicall load the i18n angular, coming from the directory angular-locale_XX-XX.js ? Thank you for your tips


<select ng-change="updateCountry()" ng-disabled="!data.locations.countries.$resolved" ng-model="selectionCountry" ng-options=" for country in data.locations.countries"></select>


.controller('MyCtrl', ['$scope','$filter', '$http', '$timeout', '$locale', function($scope, $filter, $http, $timeout, $locale) {

$ = {
locations: {
countries: []

// set default Country
$$default = 'United States';
$$resolved = false;

// Populate countries.json in Country Select
$http.get('l10n/countries.json').success(function(countries) {
$ = 0;
// actually filter is set to none. to activate choose for e.g. (countries, 'name')
Array.prototype.push.apply($, $filter('orderBy')(countries, ''));
$scope.selectionCountry || ($scope.selectionCountry = $filter('filter')($, {name: $$default})[0]);
$$resolved = true;

// get the i18n locale for the selected option
$scope.updateCountry = function() {
var selFormat=$scope.selectionCountry.i18n;

Answer Source

O.k. I got the solution:

var imported = document.createElement('script');
var fileImport = 'angular-locale_' + selFormat + '.js';
imported.src = '' + fileImport;