Question

使用angular-translate翻译选择选项非常简单：

<select name="languageId"
  ng-options="p.id as ('LANGUAGE.'+p.id)|translate for p in Const.languages | orderBy:'name'">

但是这样，选项按原始键排序，而不是按照原始键排序。有没有办法让我的已翻译的值排序该列表，而无需在控制器中提前准备该列表？

Answer 1

对我来说最简单的方法（角度1.2.24和角度转换2.14.0）：

<select name="nationality" ng-model="person.nationality" ng-options="c.id as c.name | translate for c in Const.countries | orderBy:'name | translate' ">

此信息归功于此评论的作者：https://github.com/angular-translate/angular-translate/issues/1064#issuecomment-267357441

Answer 2

您可以为orderBy提供谓词函数，并让该函数返回已翻译的值。这意味着您还必须将$filter服务传递给控制器，因为您需要在JS代码中调用translate。

所以，提供一些代码作为指导：

// CONTROLLER
// * Don't forget to inject the $filter service

$scope.translated = function(p) {
    return $filter('translate')('LANGUAGE.' + p.id);
}

然后你会修改你的orderBy表达式：

... | orderBy:translated

我意识到这个建议似乎有点费解，因为一次翻译尝试发生在ng-options内，然后另一次发生在orderBy内，但它应按照您的预期排序select个选项。

Answer 3

我遇到了同样的问题，我建议使用自己的过滤器，因为你不想搞砸你的控制器！这是我目前的解决方案：

/**
 * orderByTranslated Filter
 * Sort ng-options or ng-repeat by translated values
 * @example
 *   ng-options="country as ('countries.'+country | translate) for country in countries | orderByTranslated:'countries.'"
 * @param  {Array} array
 * @param  {String} i18nKeyPrefix
 * @param  {String} objKey
 * @return {Array}
 */
app.filter('orderByTranslated', ['$translate', '$filter', function($translate, $filter) {
  return function(array, i18nKeyPrefix, objKey) {
    var result = [];
    var translated = [];
    angular.forEach(array, function(value) {
      var i18nKeySuffix = objKey ? value[objKey] : value;
      translated.push({
        key: value,
        label: $translate.instant(i18nKeyPrefix + i18nKeySuffix)
      });
    });
    angular.forEach($filter('orderBy')(translated, 'label'), function(sortedObject) {
      result.push(sortedObject.key);
    });
    return result;
  };
}]);

注意您需要传递i18n前缀'LANGUAGE'。我看到你使用一个对象而不是一个简单的字符串数组，所以你可以像这样使用它：

<select name="languageId"
  ng-options="p.id as ('LANGUAGE.'+p.id)|translate for p in Const.languages | orderByTranslated:'LANGUAGE.':'id'">

Answer 4

我知道这是一个老问题，但今天偶然发现了这个问题，在这种情况下你可以解决它（仅适用于Array）：

<select name="languageId"
  ng-options="p.id as name=('LANGUAGE.'+p.id)|translate for p in Const.languages | orderBy:'name'">

诀窍是分配翻译并使用此作业进行排序。

按翻译的值对ng-options进行排序

4 个答案: