动态ng模型(在AngularJS中动态构建表单)

时间:2014-09-10 08:46:30

标签: angularjs forms coffeescript

我正在尝试根据特定资源Employee

的json数据构建表单

在我的范围内,我有employeeforms属性

forms属性包含构建表单的所有结构化数据,因此当我在表单中创建一个字段时,我想将该表单输入与我的一个资源属性链接

这是我在控制器上的代码(coffeescript)

app.controller 'SuperCtrl', ($scope) ->
  $scope.employee = {
    lastName: '',
    firstName:'',
  }

  $scope.forms = [
    id: "Personal Information"
    title: "Personal Information"
    sections: [
      rows: [
        fields: [
          {
            id: "first_name"
            key: "firstName"
            title: "First Name"
            type: "text"
            size: 33
            values: null
            validation: "[^()]"
          }
          {
            id: "last_name"
            key: "lastName"
            title: "Last Name"
            type: "text"
            size: 34
            values: null
            validation: "[^()]"
          }
        ]
      ]
    ]
  ]

  return

以及创建表单的视图部分

<div ng-repeat="form in forms">
      <h1>title: {{ form.title }}</h1>

      <fieldset ng-repeat="section in form.sections">
        <h1>form</h1>
        <div class="row" ng-repeat="row in section.rows">
          <p ng-repeat="field in row.fields">
            <label for="{{ field.key }}">{{ field.title }}</label>
            {{ $log.log(field + " " + field.key) }}
            <input type="{{ field.type }}"
            name="{{ field.key }}"
            ng-model="employee[field.key]" />
          </p>
        </div>
      </fieldset>
    </div>

我用谷歌搜索动态ngmodel调用,我正在做与答案ng-model="employee[field.key]"相同的事情但由于某种原因我没有得到预期的结果

预期结果

<input type="text" name="firstName" ng-model="employee.firstName class="ng-pristine ng-valid">

我得到了什么

<input type="name" name="lastName" ng-model="employee[field.key]" class="ng-pristine ng-valid">

我使用完整示例http://codepen.io/fespinoza/pen/jsfAJ?editors=101

创建了一个代码笔

我希望你能帮助我

1 个答案:

答案 0 :(得分:0)

as @cthulhu评论

我的代码有效

生成的html是我期望的那个,但绑定是正确完成的,所以代码一直在工作