AngularJS and i18n : apply ng-repeat filters after translating list items properties

Question

JSFiddle : http://jsfiddle.net/X2fsw/2/

I try to create a multilingual AngularJS application using angular-translate.

I have a static list of items embedded in my code.
Each item of this list has a title, and that title has to be displayed in the currently selected language.
Translations are done directly in the view with the help of the translate service.
Example: {{ myObject.title | translate }}.

I wish to display the list using ng-repeat, then filter it by item title.
However, the filter is applied on the translation key, not on the translated string.

What would be the best way to correct this behavior while keeping the ability to switch language at runtime?

I could store the translated string as another property (eg. myObject._title) on every language change, but my list wouldn't be a constant anymore.

What do you recommend?

Answer 1

I would consider writing a custom filter. This ist described here: http://docs.angularjs.org/guide/filter. In the custom filter you could use the $translate service translating your keys to the translated string (http://pascalprecht.github.io/angular-translate/docs/en/#/guide/03_using-translate-service)

so based on your fiddle:

myApp.filter('translateFilter', function($translate){
    return function(input, param){
        if(!param){
            return input;
        }
        var searchVal = param.key.toLowerCase();
        var result = [];
        angular.forEach(input, function(value){
            var translated = $translate(value.key);
            if(translated.toLowerCase().indexOf(searchVal)!==-1){
                result.push(value);
            }
        });
        return result;
    };
});

usage:

<li ng-repeat="day in days | translateFilter:search">
    {{ day.key | translate }}
</li>