Question

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

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

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

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

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

你推荐什么？

Answer 1

我会考虑编写自定义过滤器。这是在这里描述的：http://docs.angularjs.org/guide/filter。在自定义过滤器中，您可以使用$ translate服务将您的密钥翻译为已翻译的字符串（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>

Answer 2

以下代码适用于我。版本：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

这是针对字符串数组的。每个字符串代表服务器中的枚举。在此示例中，我的翻译文件如下所示

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

在我的情况下，我订购了翻译后的价值。但是仍然使用'枚举'值。

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

}）;

在ng-repeat中我需要再次翻译'enum'字符串，例如：

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

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

3 个答案: