AngularJS和i18n：在翻译列表项属性后应用ng-repeat过滤器

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 }} {{ 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>  

Answer 2

The following code works for me. version: AngularJS v1.3.7

    .filter('translateFilter', function($filter){
    return function(input, param){
        if(!param){
            return input;
        }
        var searchVal = param.toLowerCase();
        var result = [];
        angular.forEach(input, function(value){
            /* IMPORTANT */
            // The following "value.label", "label" should be modified to your key
            // which stores the real content
            var translated = $filter('translate')(value.label);
            if(translated.toLowerCase().indexOf(searchVal)!==-1){
                result.push(value);
            }
        });
        return result;
    };
});

Answer 3

This is for array of strings. Every string represents an enum in the server. In this example my translation file looks like this

EN: "animal":{"C":"Cat","D":"Dog","M":"Mouse"}
SV: "animal:{"C":"Katt","D":"Hund","M":"Mus"}

In my case I orderBy the translated value. But then still use the 'enum' value.

angular.module('corniche').filter('translateFilter', function($filter){
return function(input, param){
    if(!param){
        return input;
    }
    var $translate = $filter('translate');
    input.sort(function(a, b){
        var textA = $translate(param+'.'+a.toUpperCase());
        var textB = $translate(param+'.'+b.toUpperCase());
        return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
    });
    return input;
};

});

in the ng-repeat i need to translate the 'enum' string again, like:

<li ng-repeat="enum in vm.enums|translateFilter:'animal'">
<div class="checkbox">
 <label>
  <input type="checkbox" ng-model="vm.selected[enum]">
  <span id="enum-label">{{vm.enumResource+'.'+enum|translate}}</span>
 </label>
</div>
</li>