无法设置未定义角度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]" 你也有简单的数组内的交易，也没有必要使用(key, value)，只是简单的ng-repeat='your name' in vfields

这是您的fixed plunker

Answer 2

ng-model="vmodel.vfields[key].key"是错的变化ng-model="vfields[key].key"

其实我删除vmodel因为你不应该使用的角度副本

使用angular.copy分配对象或数组的值时，另一个变量和对象的值应不会改变。

不深复制或使用angular.copy，改变属性值或添加任何新的属性更新所有对象引用同一对象

所以，你应该用

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