Question

我有一个角度应用程序，它从服务器获得有关特定对象的响应。这应该为用户生成UI，可以填充并发送回服务器。

Response是一个包含数据“节点”的JSON对象。哪个里面可以有另一个节点。就像树视图一样。

问题在于这样的响应我能够使用ng-template生成第一层。

这是一个工作的codepen示例，我正在努力工作。 http://codepen.io/anon/pen/NNMepw

回应的结构是：

{   
    "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
    };
  }
]);

所以这应该创建一个UI。 UI需要根据其选择的类型动态生成。生成View的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>

所以现在我能够从

创建JSON对象

我期待创建的模型是：

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

但遗憾的是，我坚持使用这样的对象：

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

正如你所看到的那样，我能够生成生成对象的第一层，因此它可以正确地拆分为PropertyOne和PropertyTwo，但我无法以某种方式强制生成PropertyTwo中的对象。

我在这一点上陷入困境。有没有人有同样的问题？成功在嵌套对象中生成动态对象吗？

我已附上上面“几乎”工作的codepen链接。

Answer 1

在我看到您的澄清时 - 为什么不创建一个专用服务器来解析JSON并直接创建树模型而不是角度模板渲染的副作用。

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

1 个答案: