AngularJS:动态表单生成

时间:2015-04-23 09:23:39

标签: javascript angularjs angularjs-directive angularjs-scope angularjs-ng-repeat

我需要一种基于文档结构生成动态表单的方法,以便更新其属性的现有值或向多值属性添加值。

我有一个角度控制器,它接收一个文档类名和id,并提取该类的特定文档。

控制器读取文档并保存数据,如属性数量,属性类型,属性是否为多值以及值。

每个类的属性数量,属性类型都不同。

以下是我的控制器为特定类的特定文档生成的数据示例:

 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

根据处理的类和文档,这些值会发生变化。

所有这一切都运行正常,但我是角色新手,不知道如何根据以前生成的数据在视图侧渲染事物。

根据上面显示的数据示例,我希望生成的表单类似于:

enter image description here

有人能帮助我向我展示正确的方法吗?

1 个答案:

答案 0 :(得分:8)

1)将该文档数据转换为JSON对象列表,每个对象都是一个字段:

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

这可能是最复杂的部分。

2)控制器中的某处:

$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)为每个dataType定义那些字段模板。 对于&#34;文字&#34;它非常简单:

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

在此基础上,您需要添加对isMultiValue的支持,并可能使用现有数据填充documentData

还有很多图书馆正是这样做的: