在select表单中使用angular-translate和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
    }
]

但这在下拉菜单上什么都没有。这里有人能给我指路吗？

完整的代码可以在链接http://output.jsbin.com/horawaqaki/上找到

谢谢你的帮助！

Answer 1

在这种情况下，您可以在控制器中使用$translate服务。此服务可以返回转换后的值，但它是异步操作。因此，您应该在控制器中添加一些标志，以便仅在收到此转换时才显示表单(在本例中，我将使用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;
  });
}

我已经创建了工作示例here。

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