无法设置未定义角度 ng-repeat 的属性“键”答案

【问题标题】：Cannot set property 'key' of undefined angular ng-repeat无法设置未定义角度 ng-repeat 的属性“键”
【发布时间】：2016-08-16 21:15:40
【问题描述】：

我正在尝试创建模态表单。此表单的一些字段是标准字段，其中一些字段是自定义的，来自 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：无法设置未定义的属性“键”

自定义字段的模板如下所示：

<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，我的错误，如果有人可以帮助我找到我的问题，我将不胜感激。

【问题讨论】：

标签： javascript angularjs forms modal-dialog angularjs-ng-repeat

【解决方案1】：

而不是使用点符号 ' 访问成员。 '，使用括号符号 ' [ ] ' 访问它们。

点表示法仅适用于作为有效标识符名称 [规范] 的属性名称，因此基本上任何名称也是有效的变量名称

括号表示法需要一个计算结果为字符串的表达式，因此您可以使用任何字符序列作为属性名称。

您的 ng-model 应如下所示：ng-model="vmodel[vfields[key].key]" 还有你里面有简单数组的处理，没必要用(key, value)，简单的ng-repeat='your name' in vfields

这是你的fixed plunker

【讨论】：

【解决方案2】：

ng-model="vmodel.vfields[key].key"错了改成ng-model="vfields[key].key"

事实上我删除了vmodel，因为你不应该使用角度复制

在将对象或数组的值分配给另一个变量时使用 angular.copy，并且该对象值不应更改。

如果不使用深拷贝或使用 angular.copy，更改属性值或添加任何新属性会更新所有引用同一对象的对象

所以你应该使用

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

【讨论】：