javascript - AngularJS : dynamic form generation - Stack Overflow

admin管理员组

文章数量:1355710

I need a way of generating dynamic forms based on a document structure in order to update existing values of its attributes or add values to attributes that are multivalued.

I have a controller in angular that receives a document class name and id and pulls a specific document of that class.

The controller reads the document and saves data like number of attributes, attribute type, if the attribute is multivalued or not and the values.

Each class is different in number of attributes, attribute types.

Here is an example of the data generated by my controller for a specific document of a specific class:

 CLASS/id {cid: "Disease/54d49a8c3b70f6cce63dc475"}
 N° ATTRIBUTES:3(without counting multivalues of the same attribute)


 /////////////////////////////////////////////////////////////////////////////////////////////
 ATTRIBUTE NAME:displayName
 /////////////////////////////////////////////////////////////////////////////////////////////
 ATTRIBUTE DATA TYPE:text
 MULTI VALUE ATTRIBUTE:0(not multivalue field)
 ATTRIBUTE N° OF VALUES:1(existing n° of values at the moment)
 ATRIBUTE ARRAY POSITION:0 ---> value displayName #1


 /////////////////////////////////////////////////////////////////////////////////////////////
 ATTRIBUTE NAME:identifier
 /////////////////////////////////////////////////////////////////////////////////////////////
 ATTRIBUTE DATA TYPE:text
 MULTI VALUE ATTRIBUTE:1(multivalue field)
 ATTRIBUTE N° OF VALUES:1(existing n° of values at the moment)
 ATRIBUTE ARRAY POSITION:0 ---> value identifier #1


 /////////////////////////////////////////////////////////////////////////////////////////////
 ATTRIBUTE NAME:r
 /////////////////////////////////////////////////////////////////////////////////////////////
 ATTRIBUTE DATA TYPE:date
 MULTI VALUE ATTRIBUTE:1(multivalue field)
 ATTRIBUTE N° OF VALUES:3(existing n° of values at the moment)
 ATRIBUTE ARRAY POSITIONS:0 ---> value r #1
 ATRIBUTE ARRAY POSITIONS:1 ---> value r #2
 ATRIBUTE ARRAY POSITIONS:2 ---> value r #3

Depending on the processed class and document these value change.

All this works fine but I am new to angular and not sure how to render things on the view side based on the former generated data.

Based on the data example shown above I would want the generated form to be something like:

Can anyone help me showing me the right approach for this?

I need a way of generating dynamic forms based on a document structure in order to update existing values of its attributes or add values to attributes that are multivalued.

I have a controller in angular that receives a document class name and id and pulls a specific document of that class.

The controller reads the document and saves data like number of attributes, attribute type, if the attribute is multivalued or not and the values.

Each class is different in number of attributes, attribute types.

Here is an example of the data generated by my controller for a specific document of a specific class:

 CLASS/id {cid: "Disease/54d49a8c3b70f6cce63dc475"}
 N° ATTRIBUTES:3(without counting multivalues of the same attribute)


 /////////////////////////////////////////////////////////////////////////////////////////////
 ATTRIBUTE NAME:displayName
 /////////////////////////////////////////////////////////////////////////////////////////////
 ATTRIBUTE DATA TYPE:text
 MULTI VALUE ATTRIBUTE:0(not multivalue field)
 ATTRIBUTE N° OF VALUES:1(existing n° of values at the moment)
 ATRIBUTE ARRAY POSITION:0 ---> value displayName #1


 /////////////////////////////////////////////////////////////////////////////////////////////
 ATTRIBUTE NAME:identifier
 /////////////////////////////////////////////////////////////////////////////////////////////
 ATTRIBUTE DATA TYPE:text
 MULTI VALUE ATTRIBUTE:1(multivalue field)
 ATTRIBUTE N° OF VALUES:1(existing n° of values at the moment)
 ATRIBUTE ARRAY POSITION:0 ---> value identifier #1


 /////////////////////////////////////////////////////////////////////////////////////////////
 ATTRIBUTE NAME:r
 /////////////////////////////////////////////////////////////////////////////////////////////
 ATTRIBUTE DATA TYPE:date
 MULTI VALUE ATTRIBUTE:1(multivalue field)
 ATTRIBUTE N° OF VALUES:3(existing n° of values at the moment)
 ATRIBUTE ARRAY POSITIONS:0 ---> value r #1
 ATRIBUTE ARRAY POSITIONS:1 ---> value r #2
 ATRIBUTE ARRAY POSITIONS:2 ---> value r #3

Depending on the processed class and document these value change.

All this works fine but I am new to angular and not sure how to render things on the view side based on the former generated data.

Based on the data example shown above I would want the generated form to be something like:

Can anyone help me showing me the right approach for this?

• javascript
• angularjs
• angularjs-directive
• angularjs-scope
• angularjs-ng-repeat

Share Improve this question Follow edited Sep 29, 2015 at 13:21 John Slegers 47.2k2323 gold badges204204 silver badges173173 bronze badges asked Apr 23, 2015 at 9:23 Al Ex TsmAl Ex Tsm 2,10222 gold badges3131 silver badges5050 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

1) Convert that document data to a JSON list of objects, each object being a field:

fields = [
{"name": "displayName", dataType: "text", isMultiValue: false, numberOfValues: 1},
...
]

This is probably the most plicated part.

2) Somewhere in the controller:

$scope.documentData = {};
$scope.getFieldTemplateUrl = function(field) {
    return '/url/to/field/templates/' + field.dataType + '.html';
};

3)

<div ng-repeat="field in fields">
    <div ng-include="getFieldTemplateUrl(field)"></div>
</div>

4) Define those field templates for each dataType. For "text" it's quite simple:

<label for="{{field.name}}">{{field.name}}</label>
<input id="{{field.name}}" type="text" ng-model="documentData[field.name]" />

Building on this you'll need to add support for isMultiValue and probably populate documentData with the existing data.

Also there are a lot of libraries doing exactly this:

• https://github./Textalk/angular-schema-form
• https://github./danhunsaker/angular-dynamic-forms

本文标签： javascriptAngularJSdynamic form generationStack Overflow