AngularJS和国际化：翻译列表项的属性后应用NG-重复过滤器 [英] AngularJS and i18n : apply ng-repeat filters after translating list items properties

问题描述

的jsfiddle： http://jsfiddle.net/X2fsw/2/

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

我尝试使用角转换来创建一个多语种的AngularJS应用程序。

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

我有嵌在我的code项目的静态列表。结果
这个列表的每个项目都有一个标题和该标题具有要被显示在当前所选的语言。结果
在翻译与翻译服务的帮助视图中直接完成的。结果
例如： {{myObject.title |翻译}} 。

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

我想使用 NG-重复来显示列表，然后通过物品名称过滤。结果
然而，过滤器施加在翻译键，而不是在翻译的串

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?

我可以在每一种语言变存储转换的字符串作为另一个属性（如 myObject._title ），但我的名单不会是一个恒定的了。

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.

你有什么建议？

推荐答案

我会考虑写一个自定义过滤器。这IST这里描述： http://docs.angularjs.org/guide/filter 。在自定义过滤器，你可以使用$翻译服务翻译您的键将转换后的字符串（的http://pascal$p$pcht.github.io/angular-translate/docs/en/#/guide/03_using-translate-service)

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)

所以根据您的提琴：

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

用法：

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

这篇关于AngularJS和国际化：翻译列表项的属性后应用NG-重复过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！