只翻译选择的第一个选项

Question

我正在使用 AngularJS 构建一个应用程序。

该应用程序是多语言的。您可以从下拉列表中更改语言（选择 HTML 元素）。

我有以下选择：

<select id="filter" class="form-control" ng-model="filter" ng-change="ref()" ng-options="rt.text | translate for rt in rts track by rt.value">
</select>

您可能会看到text 应用了一个过滤器，即translate。这是 Angular Translate 模块的一部分。

我的下拉列表是从数据库中动态填充的，它有一个额外的选项，这是默认选项。

我想要的是在语言发生变化时翻译默认选项，我不知道该怎么做。

当前解决方案的问题是，如果它有任何其他多语言翻译选项，它们将被翻译。我不想要这个，我只想翻译默认选项。

当我添加默认选项时，我使用value='all' 和text='Show all' 将其设置为index=0。

rts的结构：

[
 {
  value:'all',
  text: 'Select_all'
 },
 {
  value:'1',
  text: 'option 1'
 },
 {
  value:'2',
  text: 'Option 2'
 }
]

Answer 1

为什么不只翻译来自服务器的那个选项呢？我假设您的控制器如下所示。此外，您还需要收听$translateChangeSuccess，以便了解语言何时发生变化：

module.controller('RtsCtrl', function ($rootScope, $scope, $translate, rtsService) {
    var translateDefaultOption = function (options) {
        options[0].text = $translate(options[0].text);
        $scope.rts = options;
    };

    var getTranslatedOptions = function () {
        rtsService
                .getOptions()/*<- Might want to cache this or not*/
                .then(translateDefaultOption);
    };

    getTranslatedOptions();

    var cleanUpOnDestroy = $rootScope.$on('$translateChangeSuccess', getTranslatedOptions);
    $scope.on('$destroy', cleanUpOnDestroy);
});

显然我不知道你的控制器是如何工作的，所以这只是一个粗略的例子。

Answer 2

编辑：不幸的是，根据 ngOptions 文档，这仅在选项值为空时有效

从ng-options 中删除默认选项，例如使用rts.slice(1)。

在<select> 中使用<option> 标签添加它。

<select ... ng-options="...">
     <option value="">
        {{ rts[0].text | translate }}
     </option>
</select>

那么你只翻译默认选项就没有问题了。