javascript - i10n angularjs 分配翻译变量

Question

好的，我有以下小翻译文件:

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

}

然后我有以下 li 项目:

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

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

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

Answer 1

components.{{1}} 不起作用的原因是 Angular 中的双 curl 只是为了计算表达式。 1 只是一个数字，因此您每次都会得到 components.1。

如果我理解正确的话，你需要有一个基于类型的对应组件。因此，如果 type.id === 1 那么您的类型是 Video。

为了在 Angular 中动态地实现这一点，你应该只需要:

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

Fiddle