javascript - 在 angularJS 中使用 JSON 显示文件系统结构

Question

我需要一个 JSON 数组，其中包含具有相应属性(类型、名称、大小、创建、修改、上次访问等)的示例文件系统。然后我想将其绘制为树结构中的网络文件系统。那么，我的 JSON 会是什么样子以及我应该如何在 angularJS 中制作该树？

版本:

我将 JSON 制作为 -

{
    "data" : {
        "path":[
            "My Files",
            "Documents"
        ],
        "data" : [
            {
                "name": "Work Documents",
                "type": "folder",
                "owner": "me",
                "size": "",
                "modified": "May 24, 2017",
                "opened": "May 22, 2017",
                "created": "May 22, 2017",
                "extention": "",
                "location": "My Files > Documents",
                "offline": true,
                "children" : [
                    {
                        "name": "Public Documents",
                        "type": "folder",
                        "owner": "public",
                        "size": "",
                        "modified": "July 8, 2015",
                        "opened": "July 8, 2015",
                        "created": "July 8, 2015",
                        "extention": "",
                        "location": "My Files > Documents",
                        "offline": true
                    },
                    {
                        "name": "Ongoing projects",
                        "type": "document",
                        "owner": "Emily Bennett",
                        "size": "1.2 Mb",
                        "modified": "July 8, 2015",
                        "opened": "July 8, 2015",
                        "created": "July 8, 2015",
                        "extention": "",
                        "location": "My Files > Documents",
                        "offline": true,
                        "preview": "assets/images/etc/sample-file-preview.jpg"
                    },
                    {
                        "name": "Shopping list",
                        "type": "document",
                        "owner": "Emily Bennett",
                        "size": "980 Kb",
                        "modified": "July 8, 2015",
                        "opened": "July 8, 2015",
                        "created": "July 8, 2015",
                        "extention": "",
                        "location": "My Files > Documents",
                        "offline": true,
                        "preview": "assets/images/etc/sample-file-preview.jpg"
                    }
                ]
            },
            {
                "name": "Private Documents",
                "type": "folder",
                "owner": "me",
                "size": "",
                "modified": "July 8, 2015",
                "opened": "July 8, 2015",
                "created": "July 8, 2015",
                "extention": "",
                "location": "My Files > Documents",
                "offline": true
            }
        ]
    }
}

但是我如何在 html 中迭代它？我目前正在显示它，但无法理解如何在单击文件夹时显示“ child ”。这是我的 html -

<tr ng-repeat="file in vm.data | filter:global.search" ng-click="vm.select(file)" ng-class="{'selected' : vm.selected === file}">
    <td class="file-icon">
        <i class="icon-{{file.type}}"></i>
    </td>
    <td class="name">{{file.name}}</td>
    <td class="type" hide show-gt-sm>{{file.type}}</td>
    <td class="owner" hide-xs>{{file.owner}}</td>
    <td class="size" hide-xs>{{file.size === '' ? '-': file.size}}</td>
    <td class="last-modified" hide show-gt-md>{{file.modified}}</td>
    <td class="show-details" hide-gt-md>
        <md-button class="md-icon-button sidenav-toggle" ng-click="vm.toggleDetails(file)" aria-label="Details" translate translate-attr-aria-label="FM.DETAILS">
            <md-icon md-font-icon="icon-information-outline"></md-icon>
        </md-button>
    </td>
</tr>

Answer 1

如果满足您的要求，您可以创建这样的 Json。假设您有一个名为 root 的根目录，并且它有子目录书籍和视频。

  Var root = {
      dirName: "root",
     metadata: {
       size: " 1 gb",
       type: "dir",
       last_modified: " 24 may 2017",
       // Other attributes
   },
   children: [
              {
     dirName: "books",
     metadata: {
       size: " 10 mb",
       type: "dir",
       last_modified: " 24 may 2017",
       // Other attributes
       },
       Children:{}
       },

       { 
          dirName: "videos",
     metadata: {
       size: " 10 mb",
       type: "dir",
       last_modified: " 24 may 2017",
       // Other attributes
       } 
      }
              ]

}

您现在可以根据需要对其进行修改