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可以走多少层，我该如何构建ng-repeat?

<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>