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

Question

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

我尝试使用 angular-translate 创建多语言 AngularJS 应用程序.

我的代码中嵌入了一个静态项目列表。
此列表的每个项目都有一个标题，该标题必须以当前选择的语言显示。
翻译是在翻译服务的帮助下直接在 View 中完成的。
示例:{{ myObject.title |翻译}}。

我希望使用 ng-repeat 显示列表，然后按项目标题过滤它。
但是，过滤器应用于翻译键，而不是翻译后的字符串。

在保持运行时切换语言的能力的同时更正此行为的最佳方法是什么？

我可以在每次语言更改时将翻译后的字符串存储为另一个属性(例如 myObject._title)，但我的列表将不再是常量。

你有什么建议？

Answer 1

我会考虑编写自定义过滤器。这在此处描述:http://docs.angularjs.org/guide/filter .在自定义过滤器中，您可以使用 $translate 服务将您的 key 翻译成翻译后的字符串 ( http://pascalprecht.github.io/angular-translate/docs/en/#/guide/03_using-translate-service )

所以根据你的 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;
    };
});

用法:

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