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：无法设置未定义的属性“key”

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

<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-model="vmodel.vfields[key].key"错误地将其更改为ng-model="vfields[key].key"

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

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

如果没有深层复制或使用angular.copy，更改属性值或添加任何新属性会更新引用该同一对象的所有对象

所以你应该使用

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

Answer 2

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

点符号仅适用于有效标识符名称[spec]的属性名称，因此基本上任何名称也都是有效的变量名称

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

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

这是您的fixed plunker

无法设置未定义角度ng-repeat

2 个答案: