在 select 形式中使用 angular-translate with formly

Question

我正在尝试使用 angular-translate 来翻译来自 select 输入的数据，这些数据是在正式制作的表单上输入的，但我无法使其正常工作。

基本上，当对其他类型的输入使用 angular-translate 时，我必须做类似

的事情

'templateOptions.label': '"NAME" | translate',
'templateOptions.placeholder': '"NAME" | translate'

按照这种模式，我试过这样放置我的数据：

"templateOptions.options": [
    {
        "name": "{{ 'OPT1' | translate }}",
        "id": 1
    },
    {
        "name": "{{ 'OPT2' | translate }}",
        "id": 2
    }
]

但是下拉菜单中什么也没有。有人可以给我指路吗？

完整的代码可以在linkhttp://output.jsbin.com/horawaqaki/

上找到

感谢您的帮助！

Answer 1

在这种情况下，您可以在控制器中使用 $translate 服务。此服务可以 return 您翻译的值，但它是异步操作。因此，您应该在控制器中添加一些标志，以便仅在您收到此翻译时显示表单（在本例中，我将使用 vm.areFieldGenerated，然后使用 show/hide 表单和带有 [= 的元素14=]).

所以，基本上你应该传递一个本地化密钥数组，$translate 服务将 return 你以下 object:

{
    '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;
  });
}

我创建了工作示例 here。

$translate 在 angular-translate.github.io 上的更多示例。

在 select 形式中使用 angular-translate with formly

Using angular-translate with formly in a select form

forms

angularjs

angular-translate

angular-formly