Question

我正在尝试创建一个布局完全由数据驱动的表单。

示例数据来源：

{
    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",
                    type : "string",
                    value : "initial value"
                }, {
                    name : "FieldC2",
                    type : "string",
                    value : "initial value"
                }
            ]
        }
    ]
}

我认为可以使用ng-repeat和ng-switch来选择表单元素，具体取决于'类型'，但是当我到达'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>

基本上我想要一种方法，当我遇到“struct”时，它会递归地将ng-switch应用到struct字段？有没有办法“引用”模板，以便它可以在同一页面上的多个位置使用？模板“部分”的支持似乎需要通过路线协调服务器端，这似乎有点过分。这是我需要开始创建自己的指令吗？

编辑我偶然发现了this，看起来它有可能做我想做的事情（我还没有正确测试），这是正确的方向吗？

Answer 1

您需要构建一个指令来获取此类数据并从中构建表单。

处理递归的方法是将每个级别（包括顶级）视为另一个结构。我在这里建了一个版本：http://jsfiddle.net/U5Kyp/9/

请务必阅读文档中的指令指南，以便了解正在发生的事情：http://docs.angularjs.org/guide/directive

Answer 2

以下是angular.js 1.0.1的已接受答案的更新。稳定版本中存在一些不兼容的更改：

ng-app现在是必需的指令
范围语法和语义已更改

http://jsfiddle.net/9qAfM/1/

Answer 3

在我看来，这是inner platform effect的一个不好的例子。引用维基百科：“软件架构师倾向于创建一个可自定义的系统，以便成为他们正在使用的软件开发平台的复制品，通常是一个糟糕的复制品。”

AngularJS已经拥有了一个强大的机制，可以遍历对象树并构建一堆范围和控制器。你可以说它是正是AngularJS的。

如果您被迫使用这种可恶的JSON构建表单，我认为最简单的方法是将它们转换为HTML（通过任何类型的简单模板语言，服务器端或客户端），然后使用$编译服务以将它们转换为angularjs应用程序。

在AngularJS中有类似模板引用的东西吗？

3 个答案: