如何用ng-repeat加载Manoj与Rainer项目下的全部文件？

没问题，我们可以通过嵌套ng-repeat或者提前处理数据的方式，轻松实现分别展示Manoj和Rainer的项目文件。下面分几种方案给你参考：

方案1：通用遍历所有用户的文件（推荐） #

如果你的JSON数据会包含多个用户（比如后续补充Rainer的条目），这种方式最灵活，能自动适配新增的用户：

第一步：编写控制器代码 #

首先把你的JSON数据注入到AngularJS作用域中：

angular.module('myApp', [])
.controller('ProjectController', function($scope) {
  // 这里是完整的项目数据（包含Manoj和Rainer）
  $scope.projects = [
    {
      "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": "report_v2.pdf", "path": "rainer/report_v2.pdf" },
        { "filename": "presentation.pptx", "path": "rainer/presentation.pptx" }
      ]
    }
  ];
});

第二步：HTML模板展示 #

通过两层ng-repeat，先遍历每个用户的项目文件夹，再遍历该文件夹下的所有文件：

<div ng-app="myApp" ng-controller="ProjectController">
  <!-- 外层遍历每个用户的项目 -->
  <div ng-repeat="project in projects" style="margin-bottom: 20px;">
    <h3>Project: {{ project.folderName | uppercase }}</h3>
    <!-- 内层遍历当前用户的所有文件 -->
    <ul>
      <li ng-repeat="file in project.files track by $index">
        文件名: {{ file.filename }} | 路径: <code>{{ file.path }}</code>
      </li>
    </ul>
  </div>
</div>

这里用track by $index是为了避免重复数据的报错，同时用uppercase过滤器把用户名转成大写，让展示更规范。

方案2：单独指定展示Manoj和Rainer的文件 #

如果只需要固定展示这两个用户的文件，也可以直接过滤数据或者提前在控制器中拆分：

方式A：在模板中使用filter过滤 #

<div ng-app="myApp" ng-controller="ProjectController">
  <!-- 展示Manoj的文件 -->
  <div>
    <h3>Project: Manoj</h3>
    <ul>
      <!-- 先过滤出manoj的项目，再遍历其files数组 -->
      <li ng-repeat="file in projects | filter:{folderName:'manoj'}:true track by $index">
        <span ng-repeat="f in file.files">
          {{ f.filename }} - <code>{{ f.path }}</code><br>
        </span>
      </li>
    </ul>
  </div>

  <!-- 展示Rainer的文件 -->
  <div style="margin-top: 20px;">
    <h3>Project: Rainer</h3>
    <ul>
      <li ng-repeat="file in projects | filter:{folderName:'rainer'}:true track by $index">
        <span ng-repeat="f in file.files">
          {{ f.filename }} - <code>{{ f.path }}</code><br>
        </span>
      </li>
    </ul>
  </div>
</div>

这里filter:{folderName:'manoj'}:true的第三个参数true表示精确匹配，避免出现类似manoj123这样的误匹配。

方式B：在控制器中提前拆分数据（更高效） #

如果数据量较大，提前在控制器中拆分可以减少模板中的逻辑，提升性能：

angular.module('myApp', [])
.controller('ProjectController', function($scope) {
  $scope.projects = [/* 你的完整数据 */];
  
  // 单独提取Manoj和Rainer的文件列表
  $scope.manojFiles = $scope.projects.find(p => p.folderName === 'manoj')?.files || [];
  $scope.rainerFiles = $scope.projects.find(p => p.folderName === 'rainer')?.files || [];
});

然后模板就可以直接遍历拆分好的数组：

<div ng-app="myApp" ng-controller="ProjectController">
  <h3>Project: Manoj</h3>
  <ul>
    <li ng-repeat="file in manojFiles track by $index">
      {{ file.filename }} - <code>{{ file.path }}</code>
    </li>
  </ul>

  <h3>Project: Rainer</h3>
  <ul>
    <li ng-repeat="file in rainerFiles track by $index">
      {{ file.filename }} - <code>{{ file.path }}</code>
    </li>
  </ul>
</div>

以上几种方案都能实现你的需求，你可以根据实际场景选择最合适的方式~

内容的提问来源于stack exchange，提问作者ravan one