logo标签列表

AngularJS：动态表单生成

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-ng-repeat
3

我需要一种根据文档结构生成动态表单的方法，以更新其属性的现有值或向具有多个值的属性添加值。

我在Angular中有一个控制器，它接收文档类名和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

这些值的变化取决于处理的类和文档。

所有这些都很好，但我是angular的新手，不确定如何根据先前生成的数据在视图侧呈现内容。

基于上面展示的数据示例，我希望生成的表单如下所示：

enter image description here

有人能帮我展示正确的方法吗？

1个回答
9

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定义相应的字段模板。对于“text”类型，这非常简单：

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

在此基础上，您需要添加对isMultiValue的支持，并可能使用现有数据填充documentData。
此外，有许多库正在精确地执行此操作：
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接