選択した書式でformlyと角度変換を使用する

Question

私は角度変換を使用して書式の選択入力からデータを変換しようとしていますが、正しく動作させることはできません。他のタイプの入力のための角度-翻訳を使用している場合

基本的に、私はこのパターン以下

'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を作成しました。

$translateの例は、angular-translate.github.ioです。