来自json数据的AngularJS动态表单（不同类型）

来自json数据的AngularJS动态表单（不同类型）

我已经解决了我的问题。

这是一个带有AngularJS中带有验证的动态表单示例的链接

http://plnkr.co/edit/kqiheTEoGDQxAoQV3wxu?p=preview

.html

 <form name="myForm"  role="form" ng-submit="submitForm()"> <div ng-repeat="field in entity.fields">      <ng-form name="form">    <!-- TEXT FIELDS -->    <div ng-if="field.type=='text'" >      <label >{{field.label}}</label>      <div >        <input type="{{ field.type }}" dynamic-name="field.name" id="{{field.name}}" data-ng-model="field.data"   required/>         <!--<span ng-show="myForm.{{field.name}}.$dirty && myForm.{{field.name}}.$error.required">Required!</span>.-->         <span  data-ng-show=" {{'form.'+field.name+'.$dirty && form.'+field.name+'.$error.required'}}">Required!</span>      </div>    </div>    <!-- EMAIL FIELDS -->    <div ng-if="field.type=='email'" >      <label >{{field.label}}</label>      <div >        <input type="{{ field.type }}" dynamic-name="field.name" data-ng-model="field.data"  required/>         <span data-ng-show=" {{'form.'+field.name+'.$dirty && form.'+field.name+'.$error.required'}}">Required!</span>         <span data-ng-show=" {{'form.'+field.name+'.$dirty && form.'+field.name+'.$error.email'}}">Not email!</span>      </div>    </div>    <!-- PASSWORD FIELDS -->    <div ng-if="field.type=='password'"  >      <label >{{field.label}}</label>      <div >        <input type="{{ field.type }}" dynamic-name="field.name" data-ng-model="field.data" ng-minlength={{field.min}} ng-maxlength={{field.max}}  required/>         <span data-ng-show=" {{'form.'+field.name+'.$dirty && form.'+field.name+'.$error.required'}}">Required!</span>         <span data-ng-show=" {{'!form.'+field.name+'.required && (form.'+field.name+'.$error.minlength || form.'+field.name+'.$error.maxlength)' }}">Passwords must be between 8 and 20 characters.</span>        </div>    </div>    <!-- SELECt FIELDS -->    <div ng-if="field.type=='select'"  >      <label >{{field.label}}</label>      <div >        <select data-ng-model="field.data" ng-options="option.name for option in field.options"  required/>      </div>          </div>    <!-- RADIO FIELDS -->    <div ng-if="field.type=='radio'" >      <label >{{field.label}}</label>      <div >        <div  ng-repeat="option in field.options" >       <label>      <input type="radio" data-ng-model="field.data"  name="taskGroup"  id="{{option.name}}" value="{{option.id}}">{{option.name}}          </label>     </div>      </div>    </div>    <!-- CHECKBOX FIELDS -->    <div ng-if="field.type=='checkbox'"  >      <label >{{field.label}}</label>      <div > <div  ng-repeat="option in field.options" >       <label>         <input type="checkbox" data-ng-model="option.data"  name="taskGroup"  id="{{option.name}}" value="{{option.id}}" >{{option.name}}       </label>     </div>      </div>    </div>  </ng-form> </div>  <br/>  <button ng-disabled="myForm.$invalid" type="submit" id="submit">Submit</button>  <br/>  <pre>{{entity|json}}</pre>   <br/> </form>

.js

app.controller('DynamicFormController', function ($scope, $log) {    // we would get this from the api    $scope.entity = {      name : "Course",       fields :        [          {type: "text", name: "firstname", label: "Name" , required: true, data:""},          {type: "radio", name: "color_id", label: "Colors" , options:[{id: 1, name: "orange"},{id: 2, name: "pink"},{id: 3, name: "gray"},{id: 4, name: "cyan"}], required: true, data:""},          {type: "email", name: "emailUser", label: "Email" , required: true, data:""},          {type: "text", name: "city", label: "City" , required: true, data:""},          {type: "password", name: "pass", label: "Password" , min: 6, max:20, required: true, data:""},          {type: "select", name: "teacher_id", label: "Teacher" , options:[{name: "Mark"},{name: "Claire"},{name: "Daniel"},{name: "Gary"}], required: true, data:""},          {type: "checkbox", name: "car_id", label: "Cars" , options:[{id: 1, name: "bmw"},{id: 2, name: "audi"},{id: 3, name: "porche"},{id: 4, name: "jaguar"}], required: true, data:""}        ]      };      $scope.submitForm = function(){        $log.debug($scope.entity);      }})  .directive("dynamicName",function($compile){    return {        restrict:"A",        terminal:true,        priority:1000,        link:function(scope,element,attrs){ element.attr('name', scope.$eval(attrs.dynamicName)); element.removeAttr("dynamic-name"); $compile(element)(scope);        }    }})