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

【问题标题】：AngularJS and i18n : apply ng-repeat filters after translating list items propertiesAngularJS 和 i18n：在翻译列表项属性后应用 ng-repeat 过滤器
【发布时间】：2017-02-11 00:24:20
【问题描述】：

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

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

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

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

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

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

你有什么推荐的？

【问题讨论】：

标签： javascript angularjs

【解决方案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>

【讨论】：

【解决方案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;
    };
});

【讨论】：

【解决方案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 中，我需要再次翻译“枚举”字符串，例如：

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

【讨论】：