具有从响应生成的Angular嵌套对象模型的JavaScript（无限深）

Question

I've got an angular application which is getting a response from the server about particular object. 我有一个角度应用程序，它正在从服务器获取有关特定对象的响应。 This should generate the UI for user which can be filled and sent back to server. 这将为用户生成UI，可以将其填充并发送回服务器。

Response is an JSON object which contain "nodes" of data. 响应是一个JSON对象，其中包含数据的“节点”。 Which inside can have another nodes. 里面可以有另一个节点。 Like a tree view. 像树视图一样。

The problem is with such response I was able to generate the first layer using ng-template. 问题在于这种响应，我能够使用ng-template生成第一层。

Here is a working codepen example which i'm trying to get work. 这是我正在努力工作的Codepen工作示例。 http://codepen.io/anon/pen/NNMepw http://codepen.io/anon/pen/NNMepw

The structure of response is: 响应的结构为：

{   
    "name": "MainNameOfOption",
    "type": "object",
    "properties": {
        "propertyOne": {
        "name": "Option1",
        "type": "object",
          "properties": {
            "ID": {
              "name": "ID",
              "type": "text",
              "properties": {},
              "enum": []
            }
          },
          "enum": null
        },
        "propertyTwo": {
          "name": "Option2",
          "type": "object",
          "properties": {
            "enabled": {
              "name": "Field",
              "type": "boolean",
              "properties": {},
              "enum": []
            },
            "Option": {
              "name": "Option",
              "type": "list",
              "properties": {},
              "enum": ["Option1", "Option2", "Option3", "Option4"]
            },
            "Objective": {
              "name": "Objective",
              "type": "object",
              "properties": {
                "GoNext": {
                  "name": "GoNext",
                  "type": "text",
                  "properties": {},
                  "enum": []
                },
                "GoBack": {
                  "name": "GoBack",
                  "type": "text",
                  "properties": {},
                  "enum": []
                }
              },
              "enum": null
            },
            "Holder": {
              "name": "Holder",
              "type": "object",
              "properties": {
                "Type": {
                  "name": "Type",
                  "type": "list",
                  "properties": { },
                  "enum": ["Option1", "Option2", "Option3", "Option4"]
                }
              },
              "enum": null
            },
          },
          "enum": null
        }
      },
      "enum": null
    };
  }
]);

So this should create a UI. 因此，这应该创建一个UI。 The UI needs to be generated dynamically depending on which type of option is it. 需要根据选项类型来动态生成UI。 The HTML which is generating the View is: 生成视图的HTML是：

<body>
  <div ng-controller="basicDemoCtrl">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div class="col-sm-12">
          </div>
          <script type="text/ng-template" id="nodes_renderer.html">

            <div>
              <label > {{ node.name }}: </label>
              <input type="checkbox" ng-if="node.type == 'boolean'"
              ng-model="result[parent.name][node.name]" ng-init="result[parent.name][node.name] = result[parent.name][node.name] || 

false"></input>
              <input type="text" ng-if="node.type == 'text' || node.type == 'int'" ng-model="result[parent.name][node.name]" ng-

init="result[parent.name][node.name] = result[parent.name][node.name] || ''" />
              <select ng-if="node.type == 'list'" ng-options="enum as enum for enum in node.enum" ng-model="result[parent.name]

[node.name]" ng-init="result[parent.name][node.name] = result[parent.name][node.name] || ''" > <option value=""> </option> 

</select>
            </div>
            <ol>
              <li ng-repeat="node in node.properties" ng-include="'nodes_renderer.html'">
              </li>
            </ol>
          </script>
          <div class="row">
            <div class="col-sm-6">
              <div id="tree-root">
                <ol ng-model="Object.properties">
                  <li ng-repeat="node in Object.properties" ng-init="parent = node" ng-include="'nodes_renderer.html'"></li>
                </ol>
              </div>
            </div>

            <div class="col-sm-6">
              <pre class="code">{{ result | json }}</pre>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
  </div>
</body>

So for now I'm able to create the JSON object from that which is 所以现在我可以从中创建JSON对象

The Model which i'm expecting to be created is: 我希望创建的模型是：

{
"Option1": {
    "ID": ""
    },
"Option2": {
    "Option": "",
    "Field": false,
    "Holder" : { 
         "Type": "Option1", 
     }
    "Objective" : {  
         "GoBack": "",
         "GoNext": ""
     }
  }
}

But sadly i'm stuck with object created like that: 但是可悲的是，我坚持创建这样的对象：

{
  "Option1": {
    "ID": ""
  },
  "Option2": {
    "Option": "",
    "Field": false,
    "Type": "",
    "GoBack": "",
    "GoNext": ""
  }
}

As you can see i was able to make the first layer of the the generated object so it's splitted properly into PropertyOne and PropertyTwo but I can not force somehow to generate the objects inside the PropertyTwo. 如您所见，我能够制作所生成对象的第一层，因此可以将其正确拆分为PropertyOne和PropertyTwo，但是我无法以某种方式强制在PropertyTwo中生成对象。

I'm stuck at this point. 我被困在这一点上。 Does anyone had the same issue ? 有人遇到过同样的问题吗？ Succeed with generating dynamically object inside the nested object ? 成功在嵌套对象内部动态生成对象？

I've attached the "almost" working codepen link above. 我已经在上面附加了“几乎”有效的Codepen链接。

Answer 1

正如我所看到的，为什么不创建一个专用服务器来解析JSON并直接创建树模型，而不是作为角度模板渲染的副作用。

具有从响应生成的Angular嵌套对象模型的JavaScript（无限深）

问题描述

1 个解决方案

解决方案1
0 2016-04-19 17:51:07

具有从响应生成的Angular嵌套对象模型的JavaScript（无限深）

问题描述

1 个解决方案

解决方案1 0 2016-04-19 17:51:07

解决方案1
0 2016-04-19 17:51:07