angular-gettext: interpolate select options

Question

I want to be able to translate the contents in the options of an angular generated dropdown using angular-gettext.

I have two different solutions and none of them work:

In this one i use ng-repeat and have the textKeys in js:

$scope.categories = ['category.Art', 'category.Automotive'];

<select class="form-control" ng-model="category" >
    <option value="{{category}}" ng-repeat="category in categories" translate="">category.{{category}}</option>
</select>

and in this one I use category.{{category}} inside the options of an ng-repeat option tag.

$scope.categories = ['Art', 'Automotive'];

<select class="form-control" ng-model="category" >
    <option value="{{category}}" ng-repeat="category in categories" translate="">category.{{category}}</option>
</select>

The result is that the textKey itself is shown but not the translation. If I change the language the [MISSING] appears.

According to the angular-gettext the last one of there should work: https://angular-gettext.rocketeer.be/dev-guide/annotate/ <- interpolation

Is this possible? And if so, how?

Answer 1

I found the answer: translate the text beforehand inside the javascript:

angular.module("myApp").controller("helloController", function (gettextCatalog) {
    var translated = gettextCatalog.getString("Hello");
});

or simply this:

<option value="{{category}}" ng-repeat="category in categories" translate="">{{category|translate}}</option>

Answer 2

Alternatively you can write a filter that translates a value but does not get parsed by the angular-gettext-tools. I called my filter post-translate and in it all I do is:

return getttext.getString(input);

Then I use it like this:

<option value="{{category}}" ng-repeat="category in categories" translate="">{{category|postTranslate}}</option>

If you were to use the standard translate filter you would get the literal string category in your po file instead of the interpolated value, which is not exactly what you want.