未定義角度ng-repeatの 'key'プロパティを設定できません

Question

私はモーダルフォームを作成しようとしています。このフォームのいくつかのフィールドは標準であり、このフィールドのいくつかはカスタムであり、API要求から来ています。カスタムフィールドのフォームなし

{ 
    "model": { 
    "eventTypeId": 1, 
    "occuredDate": "2016-08-16T19:58:00.965+0000", 
    "categories": [] 
    }, 
    "fields": [ 
    { 
     "key": "siteId", 
     "type": "input", 
     "templateOptions": { 
     "label": "Site Id", 
     "placeholder": "Site Id" 
     } 
    }, 
    { 
     "key": "patientId", 
     "type": "input", 
     "templateOptions": { 
     "label": "Patient Id" 
     } 
    }, 
    { 
     "key": "visitNumber", 
     "type": "select", 
     "templateOptions": { 
     "label": "Visit Number", 
     "options": [ 
      { 
      "name": "Screening", 
      "value": "Screening" 
      }, 
      { 
      "name": " Period 1 Day 0", 
      "value": " Period 1 Day 0" 
      }, 
      { 
      "name": " Period 1 Day 2", 
      "value": " Period 1 Day 2" 
      }, 
      { 
      "name": " Period 2 Day 0", 
      "value": " Period 2 Day 0" 
      }, 
      { 
      "name": " Period 2 Day 2", 
      "value": " Period 2 Day 2" 
      }, 
      { 
      "name": " Period 3 Day 0", 
      "value": " Period 3 Day 0" 
      }, 
      { 
      "name": " Period 3 Day 2", 
      "value": " Period 3 Day 2" 
      }, 
      { 
      "name": " Period 4 Day 0", 
      "value": " Period 4 Day 0" 
      }, 
      { 
      "name": " Period 4 Day 2", 
      "value": " Period 4 Day 2" 
      }, 
      { 
      "name": "Unscheduled", 
      "value": "Unscheduled Visit" 
      } 
     ] 
     } 
    }, 
    { 
     "key": "sourceSystemRecordId", 
     "type": "input", 
     "templateOptions": { 
     "label": "System Record Id", 
     "placeholder": "Source System Record Id" 
     } 
    } 
    ] 
} 

は素晴らしい作品、私はすべてのフィールドを埋めることができ、それがポストされます、しかし私は、カスタムフィールドを埋めるためにしようと、私は、カスタムフィールドのルックスのためのエラー

TypeError: Cannot set property 'key' of undefined

テンプレートを取得以下のような：

私は私のポストオブジェクトは（基準フィールドを除く）のように見えたことを達成しようとしている何

<div class="row"> 
      <div class="col-md-4" ng-repeat="(key, value) in vfields"> 
       <div ng-if="vfields[key].type == 'input'"> 
        <div class="form-group"> 
         <label for="fieldId">{{vfields[key].templateOptions.label}}</label> 
         <input type="text" 
           class="form-control" 
           id="fieldId" 
           placeholder="{{vfields[key].templateOptions.placeholder}}" 
           ng-model="vmodel.vfields[key].key" 
         > 
        </div> 
       </div> 
       <div ng-if="vfields[key].type == 'select'"> 
        <div class="form-group"> 
         <label for="fieldId">{{vfields[key].templateOptions.label}}</label> 
         <select class="form-control" 
           id="fieldId" 
           ng-options="item.value as item.name for item in vfields[key].templateOptions.options" 
           ng-model="vmodel.vfields[key].key"> 
         </select> 
        </div> 
       </div> 
      </div> 
     </div> 

：

object = { 
      title = text, 
      description = text, 
      vfields[key].key = some text or option value (for each custom fields) 
} 

これは私のエラーと私のplunkerです、誰かが私の問題を見つけるのを助けることができれば感謝します。

Answer 1

を使用する必要があります

同じオブジェクト

ことを参照するすべてのオブジェクトをプロパティの値を変更したり、新しいプロパティの更新を追加します表記法 'です。 '、それらを括弧表記' [] 'でアクセスしてください。

ドット表記のみ、有効な識別子名[仕様]はプロパティ名で動作しますので、基本的には任意の名前には、また、有効な変数名になり

ブラケット表記が文字列に評価される式を期待ので、あなた任意の文字シーケンスをプロパティ名として使用できます。

あなたNG-モデルは次のようになります。ng-model="vmodel[vfields[key].key]" また、あなただけのシンプルなng-repeat='your name' in vfields

これはあなたの説明のためのあなたのfixed plunker

Answer 2

ng-model="vmodel.vfields[key].key"は別の変数と、そのオブジェクトの値にオブジェクトや配列の値を代入するときにangular.copy

使用角度コピーを使うべきではありませんので、私はvmodelを取り除い実際にng-model="vfields[key].key"

に間違った変更をすべきです変更しないでください。

深いコピーせずに、またはangular.copyを使用して、あなたが代わりにドットでメンバーにアクセスする

$scope.vmodel = params.model; 
    $scope.vmodel.vfields = {};