Question

这是我的样本JSON

fields: [
        {
          name: "my_field_name",
          type: "text",
          placeholder: "place holder text"
        }],

我想要做的是，根据类型字段动态生成表单控件，并将ng-model字段值作为名称。

这就是我生成字段的方式：

<div ng-repeat="field in fields">
            <div ng-if="field.type=='text'" class="form-group">
                <label class="control-label">{{field.name}}</label>
                    <input type="{{ field.type }}"
                           ng-model="{{ field.name }}"
                                 class="form-control"
                                 required
                                 placeholder="{{ field.placeholder }}"
                    />
            </div> ....other types

所以在这种情况下，我生成的值应该看起来像

<div ng-repeat="field in fields">
            <div ng-if="field.type=='text'" class="form-group">
                <label class="control-label">my_field_name</label>
                    <input type="text"
                           ng-model="my_field_name"
                                 class="form-control"
                                 required
                                 placeholder="{{ field.placeholder }}"
                    />
            </div>

但是此ng-model属性无法解析{{}}而我收到错误

语法错误：令牌＆＃39; {＆＃39;表达式[{{field.name}}]第2列的无效密钥，从[{field.name}}开始]

有什么方法可以解决这个问题吗？

编辑::我想通了！ YEY！因此在ng-repeat中有$ index字段预定义。我可以安全地使用它来创建独特的ID。感谢：AngularJS - ng-repeat to assign/generate a new unique ID

Answer 1

不要对{{}}使用插值括号ng-model。它应该指向一个属性变量

ng-model="field.name"

Answer 2

尝试在不使用插值的情况下使用ng-model

<input type="{{ field.type }}" ng-model="field.name" class="form-control" required placeholder="{{ field.placeholder }}"

从JSON动态填写ng-model

2 个答案: