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

Question

我正在尝试从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-switch块，但是它与嵌套项变得站不住脚，就像上面的Address对象一样。

这是小提琴：http :
//jsfiddle.net/hairgamiMaster/dZ4Rg/

关于如何最好地解决此嵌套问题的任何想法？非常感谢！

Answer 1

我认为这可以为您提供帮助。它来自我在Google网上论坛上找到的关于树中递归元素的答案。

该建议来自Brendan Owen：http :
//jsfiddle.net/brendanowen/uXbn6/8/

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

<ul ng-controller="NestedFormCtrl">
    <li ng-repeat="field in formData" ng-include="'field_renderer.html'"></li>
</ul>

提出的解决方案是关于使用一个模板，该模板使用ng-include指令在当前元素具有子元素时调用自身。

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