10

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

示例数据源：

{
    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>

本质上，我想要一种方法，当我遇到“结构”时，它递归地将 ng-switch 应用于结构字段？有什么方法可以“引用”模板，以便可以在同一页面的多个位置使用它？对模板“部分”的支持似乎需要通过路由在服务器端进行协调，这在此处似乎有些过分。这是我需要开始深入研究创建自己的指令的地方吗？

编辑我只是偶然发现了这个看起来它有很大的机会做我想做的事情（我还没有正确测试它），这是在正确的方向吗？

4

3 回答 3

9

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

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

确保您阅读了文档中的指令指南，以便了解发生了什么： http: //docs.angularjs.org/guide/directive

于 2012-05-27T01:30:56.087 回答
3

这是 angular.js 1.0.1 接受答案的更新 稳定版本中有一些不兼容的更改：

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

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

于 2012-08-21T16:21:50.323 回答
0

在我看来，这是内部平台效应的一个糟糕案例。引用维基百科：“软件架构师倾向于创建一个可定制的系统，以成为他们正在使用的软件开发平台的复制品，而且通常是糟糕的复制品”。

AngularJS 已经有一个强大的机制来遍历对象树并从中构建一堆范围和控制器。你可能会争辩说这正是 AngularJS 的本质。

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

于 2013-02-13T00:45:07.567 回答