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

Question

使用嵌套对象时，如何在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-switch块，但它对嵌套项变得难以维持，就像上面的Address对象一样。

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

关于如何最好地处理这个嵌套问题的任何想法？非常感谢！

Answer 1

有一个ng-if防止“叶子”生成不必要的ng-repeat指令：<script&nbsp;type="text/ng-template"&nbsp;id="field_renderer.html"> &nbsp;&nbsp;{{field.label}} &nbsp;&nbsp;<ul&nbsp;ng-if="field.Fields"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;ng-repeat="field&nbsp;in&nbsp;field.Fields"&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ng-include="'field_renderer.html'"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> &nbsp;&nbsp;</ul></script><ul> &nbsp;&nbsp;<li&nbsp;ng-repeat="field&nbsp;in&nbsp;formData"&nbsp;ng-include="'field_renderer.html'"></li></ul>这是Plunker的工作版本

Answer 2

可以考虑使用ng-switch来检查Fields属性的可用性。如果是，则为该条件使用不同的模板。此模板将在Fields数组上具有ng-repeat。