如何使用angularjs动态创建表单

Question

I am trying to figure out how to dynamically create a form based on an array of fields returned from the server.

Something like this

[{
  id: "title",
  type: "text", /* Map to Input type=text */
  regex: "/^[a-zA-Z]+/"
},{
  id: "summary",
  type: "memo", /* Map to Textarea */
  regex: "/^[a-zA-Z]+/"
},{
  id: "priority",
  type: "list", /* Map to Select */
  options: [1,2,3,4,5]
}]

I cant figure out a nice way of doing this, even with ng-repeat. Once the form has about 30 fields, and 15+ different input types, it gets very ugly.

Whats the 'Angular' way to do this, or should i generate the controller.js and template.html dynamically on the server?

Answer 1

Try this. It is not the answer, just an approach.Hope It may help You.

HTML:

<div ng-repeat="person in person">
<form class="form-group" name="signinForm">
<label>Name:
<input class="form-control" ng-model="person.name" type="text">
</label>
<label>Male:
<input class="form-control" ng-model="person.gender" name="gender{{$index}}" type="radio" value="male">
</label>
<label>Female:
<input class="form-control" ng-model="person.gender" name="gender{{$index}}" type="radio" value="female">
</label><br>
<label>Age
<input class="form-control" ng-model="person.age" type="number">
</label>
</form>
<button type="button" ng-click="addPerson()">Add More</button>
</div>

JS:

 $scope.initialize = [{}];
    $scope.person = {};
    $scope.addPerson = function(){
        $scope.initialize.push({});// adding more similar fields.
    }