recursion - 使用嵌套对象时，如何在 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 block ，但它对于嵌套项目来说变得站不住脚，就像上面的 Address 对象一样。

这是 fiddle : http://jsfiddle.net/hairgamiMaster/dZ4Rg/

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

Answer 1

我认为这可以帮助你。这是我在Google Group上找到的答案关于树中的递归元素。

建议来自 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 (如果有任何子标签)。