Recursion 使用嵌套对象时，如何在AngularJS中创建递归模板？

我试图从JSON对象动态构建表单，该对象包含嵌套的表单元素组：

  $scope.formData = [
  {label:'First Name', type:'text', required:'true'},
  {label:'Last Name', type:'text', required:'true'},
  {label:'Coffee Preference', type:'dropdown', options: ["HiTest", "Dunkin", "Decaf"]},
  {label: 'Address', type:'group', "Fields":[
      {label:'Street1', type:'text', required:'true'},
      {label:'Street2', type:'text', required:'true'},
      {label:'State', type:'dropdown',  options: ["California", "New York", "Florida"]}
    ]},
  ];

我一直在使用ng开关块，但它对于嵌套项来说是不可行的，就像上面的Address对象一样

这是小提琴：

---

关于如何最好地解决这个嵌套问题，有什么想法吗？非常感谢

< P>可以考虑使用NG交换机检查字段属性的可用性。如果是这样，则针对该条件使用不同的模板。此模板在Fields数组上会有一个ng repeat。

我认为这会对您有所帮助。这是我在一篇关于树中递归元素的文章中找到的答案

布伦丹·欧文的建议是：

{{data.label}

建议的解决方案是使用一个模板，如果当前元素有子元素，该模板使用ng include指令来调用自身

---

在您的情况下，我会尝试使用ng switch指令创建一个模板（像您一样，每种标签类型一个案例），并在末尾添加ng include（如果有任何子标签）。

结合@jpmorin和@Ketan的建议（对@jpmorin的答案略有更改，因为它实际上不起作用）…有一个

ng if

来防止“叶子树”生成不必要的

ng repeat

指令：

<script type="text/ng-template" id="field_renderer.html">
  {{field.label}}
  <ul ng-if="field.Fields">
      <li ng-repeat="field in field.Fields" 
         ng-include="'field_renderer.html'">
      </li>
  </ul>
</script>
<ul>
  <li ng-repeat="field in formData" ng-include="'field_renderer.html'"></li>
</ul>

{{field.label}

---

这是

中的工作版本，我知道这是一个老问题，但对于通过搜索来这里的其他人，我想我会留下一个更简洁的解决方案

它基于同样的想法，但不必在模板缓存中存储模板等。我希望有一个更“干净”的解决方案，所以我最终创建了

使用起来相当简单：

<ul dx-start-with="rootNode">
  <li ng-repeat="node in $dxPrior.nodes">
    {{ node.name }}
    <ul dx-connect="node"/>
  </li>
</ul>

{{field.label}
{{field.label}
{{option}}
{{field.label}

我只想在基于属性的结构中扩展jpmorin post

JSON：

{
  "id": 203,
  "question_text_id": 1,
  "yes": {
    "question_text_id": 25,
    "yes": {
      "question_text_id": 26
    }
  },
  "no": {
    "question_text_id": 4
  }
}

正如您所看到的，这里的json对象不包含数组结构

HTML

{{key}}{{value}}

在这种情况下，您可以对其进行迭代

角度ng重复属性的文档

---

并且可以找到一些行实现。

非常感谢-我认为这是要使用的技术。干杯如果您的数据结构不重复，因此无法使用中继器，但嵌套值的数量不确定，该怎么办？看：@jpmorin:我会怎么对待你？您可以回答这个解决方案很好，但请记住性能。此解决方案存在严重的性能问题。阅读Ben Nadels的文章了解更多信息：我可以在此解决方案中使用

track by

？我需要添加键盘导航，按其ID搜索每个元素似乎不是一个好的解决方案。我只是以一种非常通用的方式回答了另一个问题：

{
  "id": 203,
  "question_text_id": 1,
  "yes": {
    "question_text_id": 25,
    "yes": {
      "question_text_id": 26
    }
  },
  "no": {
    "question_text_id": 4
  }
}