i10n angularjs назначения перевести переменную

Question

Хорошо, так у меня есть следующий небольшой перевод файла:

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

он переводит правильно, однако этот метод не работает для меня

поэтому мой вопрос, как можно изменить динамически значение а на перевод атрибута?

Answer 1

Причина, по которой components.{{1}} не работает, заключается в том, что двойные завитки в Angular предназначены только для оценки выражения. 1 - это просто номер, поэтому вы получите components.1 каждый раз.

Если я правильно понимаю, что вам нужно, у вас должен быть соответствующий компонент, основанный на типе. Так что если type.id === 1, то ваш тип Video.

Для того, чтобы достичь этого в Угловое динамически, вы должны просто:

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

Fiddle

Answer 2

Пожалуйста, дайте этому попытку:

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

или

translate="{{'components.' + ($index + 1)}}" 

Answer 3

Насколько я понимаю, вы хотите динамизировать перевод json, если добавили новый тип в ваш componentTypes.

Чтобы решить эту проблему, вы можете создать новую фабрику по заказу переводов и использовать ее указанным здесь способом https://github.com/angular-translate/angular-translate/wiki/Asynchronous-loading. После этого вы должны добавить этот новый элемент в перевод json, свой массив, а затем обновить перевод.

Вид:

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

Примечание: Подобные модификации переводов не будут постоянными, и новые переводы будут потеряны.