使用嵌套对象时，如何在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 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>

这是Plunker的工作版本

Answer 2

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