Question

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

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

我有以下选择：

info

您可能会看到<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。这是Angular Translate模块的一部分。

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

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

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

当我添加默认选项时，我使用translate和index=0在value='all'上进行了设置。

rts的结构：

text='Show all'

Answer 1

编辑：不幸的是，只有当选项值为空时才会生效，每个ngOptions docs

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

使用<option>内的<select>标记添加。

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

那么只翻译默认选项就不会有问题。

Answer 2

为什么不在服务器的路上只翻译该选项？我假设您的控制器看起来像下面这样。此外，您需要收听$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);
});

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

仅翻译选择的第一个选项

2 个答案: