Я пытаюсь использовать angular-translate для перевода данных из выбранного ввода в форме, сделанной формально, но я не могу заставить ее работать правильно.
В принципе, при использовании углового перевода для других типов ввода я должен был бы сделать что-то вроде
'templateOptions.label': '"NAME" | translate',
'templateOptions.placeholder': '"NAME" | translate'
следуя этому шаблону, я попытался поместить свои данные следующим образом:
"templateOptions.options": [
{
"name": "{{ 'OPT1' | translate }}",
"id": 1
},
{
"name": "{{ 'OPT2' | translate }}",
"id": 2
}
]
Но это ничего не дает мне в выпадающем меню. Может ли кто-нибудь дать мне какие-либо указания здесь?
Полный код можно найти по ссылке http://output.jsbin.com/horawaqaki/
Спасибо за помощь!
В этом случае вы можете использовать $translate
service внутри своего контроллера. Эта услуга может возвращать переведенные значения, но это асинхронная операция. Из-за этого вы должны добавить некоторый флаг в свой контроллер, чтобы показывать форму только тогда, когда вы получаете эти переводы (в этом примере я собираюсь использовать vm.areFieldGenerated
а затем показать/скрыть форму и элемент с помощью ng-if
).
Итак, в основном вы должны передать массив ключей локализации, а служба $translate
вернет вам следующий объект:
{
'NAME': 'Name',
'OPT1': 'Working!',
'OPT2': 'Working indeed!'
}
И после этого вы сможете использовать это значение для локализации названия поля или параметров.
Ваша функция для генерации полей и присвоенных им значений будет выглядеть следующим образом:
// variable assignment
vm.env = getEnv();
vm.model = {};
vm.options = {formState: {}};
vm.areFieldsGenerated = false;
generateFields();
// function definition
function generateFields() {
$translate(['NAME', 'OPT1', 'OPT2']).then(function(translationData) {
vm.fields = [
{
key: 'item',
type: 'select',
templateOptions: {
valueProp: 'id',
labelProp: 'name',
options: [
{name:'Not working!', id: 1},
{name:'Not working indeed!', id: 2}
]
},
expressionProperties: {
'templateOptions.label': transationData['NAME'],
'templateOptions.options': [
{
name: translationData['OPT1'],
id:1
},
{
name: translationData['OPT2'],
id:2
}
]
}
}
];
vm.originalFields = angular.copy(vm.fields);
vm.areFieldsGenerated = true;
});
}
Я создал рабочий пример здесь.
Дополнительные примеры с $translate
on angular-translate.github.io.