Использование angular-translate с formly в форме выбора

0

Я пытаюсь использовать 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/

Спасибо за помощь!

Теги:
forms
angular-translate
angular-formly

1 ответ

1
Лучший ответ

В этом случае вы можете использовать $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.

  • 0
    хороший! Спасибо

Ещё вопросы

Сообщество Overcoder
Наверх
Меню