I'm trying to acplish something similar to this to add support for languages using AngularJS:

window.language = english;
$scope.title.english = "English thing";
$scope.title.spanish = "Espanol Si";

<h1 ng-bind="title.{{window.language}}"></h1>

Anyone know how to do something like this from within the template?

I'm trying to acplish something similar to this to add support for languages using AngularJS:

window.language = english;
$scope.title.english = "English thing";
$scope.title.spanish = "Espanol Si";

<h1 ng-bind="title.{{window.language}}"></h1>

Anyone know how to do something like this from within the template?

• javascript
• angularjs

Share Improve this question Follow asked Nov 2, 2015 at 15:26 HeyMegabyteHeyMegabyte 76511 gold badge99 silver badges3232 bronze badges 2

• bracket notation: title[language]. note: window not available in view if you not do $scope.window = window in js – Grundy Commented Nov 2, 2015 at 15:28
• You should use a plugin for this. There are multiple, check this one out: angular-translate.github.io/docs/#/guide Let me know if you insist on doing it manually. – VSO Commented Nov 2, 2015 at 15:42

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

there are mutliple ways of achieving this:

1 - logic in html:

JS

$scope.window = window;
$scope.title = {
    english: 'English thing',
    spanish: 'Espanol Si'
};

HTML

<h1 ng-bind="title[window.language]"></h1>

or

<h1>{{title[window.language]}}</h1>

but this will lead to a lot of code duplications and also you'll end up with no text at all for missing translations (and also no error)

2 - logic in controller

JS

var title = {
    english: 'English thing',
    spanish: 'Espanol Si'
};

$scope.getTitle = function() {
    // maybe add code for error handling here
    return title[window.language];
};

HTML

<h1 ng-bind="getTitle()"></h1>

or

<h1>{{getTitle()}}</h1>

this still leaves you with a lot of code duplications, but at least you can perform some validation logic and may throw an error on a missing validation (or provide some kind of fallback mechanism). additionally as it is now javascript code, it is easily testable as well.

3 - create a custom filter

JS - filter

angular
    .module('myI18n', [])
    .filter('my18n', function() {
        return function(data) {
            // add code for error handling etc. here
            return data[window.language];
        };
    });

JS - controller

$scope.title = {
    english: 'English thing',
    spanish: 'Espanol Si'
};

HTML

<h1 ng-bind="title | myI18n"></h1>

or

<h1>{{title | myI18n}}</h1>

this is probably the cleanest solution you can get, and it is also very expressive as you directly state in your html what should happen to your code, without relying on the implementation details (maybe you want to change window.language to window.i18n.language later on or something like that). also it is easily testable again.

So you if you really want to go with implementing something like this yourself, i would remend the 3rd option, but you have to be aware that you are limited to synchronous translations. For a more sophisticated approach i would really remend using a ready to use i18n library like angular-translate