angular-translate ad ng-options

Question

I'm trying to translate a select drop-down and I don't like the way I'm doing it, because it's cumbersome and it bypasses the whole angular-translate framework.

The locale data looks like {"lang": {"label": "text", "select": {"k1": "var1", "k2": "var2"}}} and if I plonk the "select" member in the controller scope, I can write something like "k as v for (k,v) in scopedvar" in the ng-options of the select.

Basically I'd like translate to do the language resolution and then get out of the way and return the map of localizations for my options. If it made sense, something like: "k as v for (k, v) in 'select' | translate", but of course it doesn't.

Has anyone faced (and solved) this issue before?

TIA, Edoardo

Answer 1

I didn't completely get what you're trying to achieve, but I'll put some code that works fine for reloading the options translations with the | translate filter.

Assuming you have this json as key/values for your translations:

var english = {"lang": {
                 "label": "text", 
                 "select": {
                    "k1": "var1", 
                    "k2": "var2"
                 }}
              };

And your controller creates a list of options like this:

$scope.optionsList = [
    {val: 'var1', translationKey: 'lang.select.k1'},
    {val: 'var2', translationKey: 'lang.select.k2'}
];

You should be good to go inserting the translate filter after the option label in the ng-options expression:

<select ng-model="selectedOpt" 
        ng-options="opt.val as opt.translationKey | translate for opt in optionsList">
</select>

Hope it helps!