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

Answer 2

结合@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>

这是Plunker的工作版本