我正在尝试创建一个表单,其布局完全是数据驱动的.
示例数据源：
{
title : "Form Test",fields : [{
name : "FieldA",type : "string",value : "initial value"
},{
name : "FieldB",type : "selection",options : ["1","2","3"],value : "2"
},{
name : "FieldC",type : "struct",value :
[{
name : "FieldC1",value : "initial value"
},{
name : "FieldC2",value : "initial value"
}
]
}
]
}
我认为可以使用ng-repeat和ng-switch来根据’type’来选择表单元素,但是当我到达’FieldC’时,我会递归地执行此操作.
<span ng-switch on="field.type">
<div ng-switch-when="string">STRING: {{field.value}}</div>
<div ng-switch-when="selection">SELECTION: {{field.value}}</div>
<div ng-switch-when="struct">STRUCT: ????</div>
<div ng-switch-default>DEFAULT:{{field.value}}</div>
</span>
本质上,我想要一种方法,当我遇到一个“结构”时,递归地将ng切换应用到结构域中？有没有办法“引用”模板,以便它可以在同一页面的多个地方使用？对模板“部分”的支持似乎需要通过路由协调服务器端,这在这里似乎过于杀伤.这是我需要开始挖掘创建自己的指令的东西吗？
编辑我只是偶然发现this,看起来它有一个很好的机会做我想要的(我还没有正确测试),是正确的方向吗？
您将需要构建一个使用这种数据的指令,并从中构建表单.
原文链接：https://www.f2er.com/angularjs/140788.html处理递归的方法是将包括顶级在内的每个级别视为另一个结构.我在这里建了一个版本：http://jsfiddle.net/U5Kyp/9/
确保您阅读文档中的指导指南,以便您了解发生的情况：http://docs.angularjs.org/guide/directive
