angularjs嵌套NG重复的文件夹结构 [英] angularjs nested ng-repeat for folder structure

问题描述

我需要从一个JSON对象创建文件和文件夹列表。文件夹结构可以走得很深，但在我的例子中，我只嵌套3级。例如：

I need to create a list of files and folders from a JSON object. Folder structure can go very deep but in my example I have only nested 3 levels. eg:

• 文件


• 文件夹
  
  
  • 文件
  
  
  • 子文件夹
    
    
    • 文件
    
    
    • subSubFolder
      
      
      • 文件
      
      

      下面是一些示例JSON：

      Here is some sample 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-重复？

      Given that I don't know how many levels my JSON can go, how would I structure the 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>
      

      有没有更好的方法来做到这一点？

      Is there a better way to do this?

      推荐答案

      感谢您的链接，他们是有帮助的。到底这样做有问题。

      Thanks for the links, they were helpful. In the end this did the trick.

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

      这篇关于angularjs嵌套NG重复的文件夹结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！