如何使用 ng-repeat获取完整的文件

Question

我有一个JSON对象。我想使用 ng-repeat(ng-repeat(显示数据。我想使用 ng-repeat 加载所有Project: Manoj和Project: Rainer的文件。

预期产出

Manoj 所有使用 ng-repeat 的项目

Rainer 所有使用 ng-repeat 的项目

下面是我的 JSON

[
    {
        "folderName": "manoj",
        "files": [
            {
                "filename": "FLIP_Libraries_v1.6.zip",
                "path": "manoj/FLIP_Libraries_v1.6.zip"
            },
            {
                "filename": "blog-img-1.jpg",
                "path": "manoj/blog-img-1.jpg"
            },
            {
                "filename": "blog-post-1.jpg",
                "path": "manoj/blog-post-1.jpg"
            }
        ]
    },
    {
        "folderName": "rainer",
        "files": [
            {
                "filename": "blog-img-1.jpg",
                "path": "rainer/blog-img-1.jpg"
            },
            {
                "filename": "blog-post-4.jpg",
                "path": "rainer/blog-post-4.jpg"
            },
            {
                "filename": "comment-img-1.png",
                "path": "rainer/comment-img-1.png"
            }
        ]
    }
]

Answer 1

试试这样的事情。它只是两个ng-repeat：一个用于文件夹，一个用于文件。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.json = [{
      "folderName": "manoj",
      "files": [{
          "filename": "FLIP_Libraries_v1.6.zip",
          "path": "manoj/FLIP_Libraries_v1.6.zip"
        },
        {
          "filename": "blog-img-1.jpg",
          "path": "manoj/blog-img-1.jpg"
        },
        {
          "filename": "blog-post-1.jpg",
          "path": "manoj/blog-post-1.jpg"
        }
      ]
    },
    {
      "folderName": "rainer",
      "files": [{
          "filename": "blog-img-1.jpg",
          "path": "rainer/blog-img-1.jpg"
        },
        {
          "filename": "blog-post-4.jpg",
          "path": "rainer/blog-post-4.jpg"
        },
        {
          "filename": "comment-img-1.png",
          "path": "rainer/comment-img-1.png"
        }
      ]
    }
  ]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="project in json">
    <h3>Folder Name: {{project.folderName}}</h3>
    <h4>Files:</h4>
    <div ng-repeat="file in project.files">
      <p>
        Filename: {{file.filename}}
        <br>
        Path: {{file.path}}
      </p>
    </div>
    <hr>
  </div>
</div>