angularjs вложен ng-repeat для структуры папок

Question

Мне нужно создать список файлов и папок из объекта JSON. Структура папок может идти очень глубоко, но в моем примере у меня есть только вложенные 3 уровня. например:

• Файлы
• Папка
  • Файлы
  • ПОДПАПКА
    • Файлы
    • subSubFolder
      • Файлы

Вот некоторые примеры JSON:

{ 
    "List": [ 
     { 
      "id": 0, 
      "files": [ 
       { 
        "name": "Test-1.docx", 
        "id": 80 
       }, 
       { 
        "name": "Test-2.docx", 
        "id": 81 
       } 
      ], 
      "folders": [ 
       { 
        "name": "Folder Top Level", 
        "folders": [ 
         { 
          "name": "Folder Sub Level", 
          "folders": [ 
           { 
            "name": "Folder Sub Sub Level", 
            "folders": [], 
            "files": [ 
             { 
              "name": "Test-7.docx", 
              "id": 87 
             }, 
             { 
              "name": "Test-8.docx", 
              "id": 88 
             } 
            ] 
           } 
          ], 
          "files": [ 
           { 
            "name": "Test-5.docx", 
            "id": 85 
           }, 
           { 
            "name": "Test-6.docx", 
            "id": 86 
           } 
          ] 
         } 
        ], 
        "files": [ 
         { 
          "name": "Test-3.docx", 
          "id": 83 
         }, 
         { 
          "name": "Test-4.docx", 
          "id": 84 
         } 
        ] 
       } 
      ] 
     } 
    ] 
} 

Учитывая, что я не знаю, сколько уровней моя JSON может идти, как бы я структурировать нг-повтор ?

<div> 
    <ol ng-model="list"> 
    <li ng-repeat="file in list.files">{{file.name}}</li>   
    <li ng-repeat="folder in list.folders"> 
     {{folder.name}} 
     <ol ng-model="folder.folders"> 
     <li ng-repeat="folder in folder.folders" ng-if="folder.folders.length > 0"> 
      {{folder.name}} 
     </li> 
     <li ng-repeat="file in folder.files" ng-if="folder.files.length > 0"> 
      {{file.name}} 
     </li> 
     </ol> 
    </li> 
    </ol> 
</div> 

Есть ли лучший способ сделать это?

Answer 1

Спасибо за ссылки, они были полезны. В конце концов это сделал трюк.

<script type="text/ng-template" id="field_renderer.html"> 
    <ol ng-model="folder.folders"> 
     <strong>{{folder.name}}</strong> 
     <ol><li ng-repeat="file in folder.files">{{file.name}}</li></ol> 
     <li ng-repeat="folder in folder.folders" ng-include="'field_renderer.html'"></li> 
    </ol> 
</script> 

<ol ng-model="list"> 
    <li ng-repeat="folder in list" ng-include="'field_renderer.html'"></li> 
</ol>