AngularJS：动态表单生成
铝防爆
我需要一种基于文档结构生成动态表单的方法，以便更新其属性的现有值或将值添加到多值属性。
我有一个角度控制器，可以接收文档类名称和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
根据所处理的类和文档，这些值会更改。
所有这些都可以正常工作，但是我是新手，不知道如何根据以前生成的数据在视图侧渲染事物。
基于上面显示的数据示例，我希望生成的表单类似于：
谁能帮我向我展示正确的方法吗？
塞尔吉·帕拉西夫（Sergiu Paraschiv）
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。对于“文本”，它非常简单：
<label for="{{field.name}}">{{field.name}}</label>
<input id="{{field.name}}" type="text" ng-model="documentData[field.name]" />
在此基础上，您需要添加对现有数据的支持，isMultiValue并可能填充documentData现有数据。
也有很多库正是这样做的：
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
带有验证的AngularJs动态表单生成
- 2
带有验证的AngularJs动态表单生成
- 3
生成动态ng模型以在angularJS中进行表单控制
- 4
生成动态ng模型以在angularJS中进行表单控制
- 5
AngularJS中的动态表单
- 6
动态表单创建-AngularJS
- 7
AngularJS：创建动态表单
- 8
动态AngularJS表单
- 9
Angularjs 动态表单内容
- 10
angularjs-表单ng-submit无法与动态生成的表单html一起使用
- 11
AngularJs动态模型生成
- 12
jQuery访问动态生成的表单
- 13
在模板中动态生成表单
- 14
POST表单动态生成的输入
- 15
POST表单动态生成的输入
- 16
流星动态表单域生成
- 17
用jQuery生成动态表单
- 18
动态表单生成 Angular 5
- 19
React - 如何生成动态表单
- 20
在angularjs中构造动态表单
- 21
在angularjs中提交动态表单
- 22
AngularJS - 数组内的动态表单
- 23
动态生成的输入指令上的AngularJS表单验证不适用于ngForm
- 24
在AngularJS中动态生成模型
- 25
AngularJS删除动态生成的行
- 26
使用JSON模式动态生成表单
- 27
使用jQuery动态生成表单元素
- 28
根据表单输入生成动态网址
- 29
Android中的动态表单生成器
我来说两句