i10n angularjs分配翻译变量

i10n angularjs assign translate variable

本文关键字：变量 翻译 分配 angularjs i10n      更新时间：2023-09-26

好的，所以我有下面的小翻译文件：

    {
    "components" : {
    "1" : "Video",
    "2" : "Lyd",
    "3" : "Dokument",
    "4" : "Tekst"
}
}

然后我有以下李项目：

<li ng-repeat="type in componentTypes" ng-hide="module.module_type_id == 2 || module.module_type_id == 10"><a href="" ng-click="addComponent(type)" translate="components.{{1}}">{{type.name}}</a></li>

您需要注意的是：

<a href="" ng-click="addComponent(type)" translate="components.{{1}}">{{type.name}}</a>

或者更准确地说：

translate="components.{{1}}"

这样它就不会翻译<a></a>标签。

然而，如果我做

translate="components.1"

它翻译正确，但是这种方法对我不起作用

所以我的问题是如何动态地更改translate属性的值？

components.{{1}}不起作用的原因是Angular中的双curlies只是用来计算表达式。1只是一个数字，所以你每次都会得到components.1。

如果我正确理解您需要什么，那么您需要有一个基于类型的相应组件。所以如果是type.id === 1，那么你的类型就是Video。

为了在Angular中动态实现这一点，您只需要具备：

translate="{{components[type.id]}}"

Fiddle

据我所知，如果向componentTypes数组添加了一个新类型，您希望动态化转换json。

有一个解决方案可以满足这种需求，您可以在这里实现一个新的自定义翻译加载程序工厂并以指定的方式使用它https://github.com/angular-translate/angular-translate/wiki/Asynchronous-loading.之后，您必须将这个新项目添加到您的数组的translationjson中，然后刷新翻译。

视图：

<div ng-app="myApp">
    Links to jsfiddle.net must be accompanied by code. Please indent all code by 4 <div ng-controller="MyCtrl">
        <input type="text" ng-model="type.name" /> <a href="javascript:;" ng-click="addComponent(type)">Add Component</a>
        <ul>
            <li ng-repeat="type in componentTypes" ng-hide="module.module_type_id == 2 || module.module_type_id == 10">{{ 'components.' + type.name | translate }}</li>
        </ul>
    </div>
</div>

应用程序的实施：

var myApp = angular.module('myApp', ['pascalprecht.translate']);
var components_en = {
    "components": {
        "1": "Video",
            "2": "Lyd",
            "3": "Dokument",
            "4": "Tekst"
    }
};
myApp.config(function ($translateProvider) {
    $translateProvider.useLoader('customLoader', {});
    $translateProvider.translations('en', components_en);
    $translateProvider.preferredLanguage('en');
});
myApp.controller('MyCtrl', function ($scope, $translate) {
    $scope.module = {
        module_type_id: 1
    };
    $scope.addComponent = function (type) {
        // Add the componentTypes array you took from database
        $scope.componentTypes.push({
            name: $scope.componentTypes.length + 1
        });
        // Add the translation object
        components_en["components"][$scope.componentTypes.length] = type.name;
        console.log(components_en);
        $translate.refresh();
    };
    $scope.componentTypes = [{
        name: 1
    }, {
        name: 2
    }, {
        name: 3
    }, {
        name: 4
    }];
});
myApp.factory('customLoader', function ($http, $q) {
    return function (options) {
        var deferred = $q.defer();
        deferred.resolve(components_en);
        return deferred.promise;
    }
})

我为类似的用法准备了一个演示，请在jsfiddle:下面

http://jsfiddle.net/nerezo/1z071wzg/6/

注意：这种类似翻译的修改将不会持久，新的翻译将丢失。

请尝试一下：

translate="{{'components.' + type.id}}" //if there is id in type

或

translate="{{'components.' + ($index + 1)}}"
相关文章：