angularjs nested ng-repeat for folder structure

Question

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:

Files
Folder
- Files
- subFolder
  - Files
  - subSubFolder
    - Files

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

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?

google for angular recursive directive, should find plenty of results — charlietfl
– charlietfl, Commented Jul 21, 2015 at 0:39

uknowit2 · Accepted Answer · 2015-07-22 04:31:56Z

1

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>

answered Jul 22, 2015 at 4:31

uknowit2

4692 gold badges7 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angularjs nested ng-repeat for folder structure

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related