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

admin管理员组

文章数量:1356327

JSFiddle : /

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 remend?

JSFiddle : http://jsfiddle/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 remend?

• javascript
• angularjs

Share Improve this question Follow asked Jan 5, 2014 at 0:18 user2804989user2804989 10811 silver badge44 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

I would consider writing a custom filter. This ist described here: http://docs.angularjs/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>  

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;
    };
});

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>

本文标签： javascriptAngularJS and i18napply ngrepeat filters after translating list items propertiesStack Overflow