CODEWITHSUNDEEP
javascriptangularjs
user2804989
user2804989

Reputation: 108

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

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?

Upvotes: 5

Views: 4144

Answers (3)

Jens Alenius
Jens Alenius

Reputation: 1931

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>

Upvotes: 0

Jonathan Lee
Jonathan Lee

Reputation: 136

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

Upvotes: 1

michael
michael

Reputation: 16341

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>

Upvotes: 6

Related Questions