AngularJS目录展示需求：点击父目录仅显示对应子文件夹

我来帮你搞定这个问题！核心原因是当前代码没有给父目录和对应的子文件夹建立关联过滤逻辑，所以点击任意父目录都会把所有子文件夹都显示出来。下面是具体的修复方案：

1. 控制器（JS）添加关联逻辑 #

首先在你的AngularJS控制器里，添加一个变量存储选中的父目录路径，再写一个过滤函数用来匹配对应的子项：

// 假设你的控制器基础结构如下
app.controller('FolderCtrl', function($scope, $http) {
  $scope.parentFolders = [];
  $scope.childFolders = [];
  $scope.selectedParent = null; // 存储选中的父目录路径

  // 获取父目录数据
  $http.get('link_folders.json').then(function(response) {
    $scope.parentFolders = response.data;
  });

  // 获取子文件夹数据
  $http.get('more_folders.json').then(function(response) {
    $scope.childFolders = response.data;
  });

  // 点击父目录时触发，记录选中的路径
  $scope.selectParentFolder = function(parentPath) {
    $scope.selectedParent = parentPath;
  };

  // 过滤子文件夹的函数：只保留选中父目录下的项（包括父目录本身）
  $scope.filterChildItems = function(folder) {
    // 检查子项路径是否以选中的父路径开头
    const isChild = folder.path.startsWith($scope.selectedParent);
    // 确保要么是父目录本身，要么是更深层级的子项
    const isCorrectLevel = folder.path === $scope.selectedParent || 
                          folder.path.split('/').length > $scope.selectedParent.split('/').length;
    return isChild && isCorrectLevel;
  };
});

2. 修改HTML模板，关联点击事件和过滤逻辑 #

在HTML里给父目录项添加点击事件，并且让子文件夹列表只显示过滤后的结果：

<!-- 父目录列表 -->
<ul>
  <li ng-repeat="folder in parentFolders" 
      ng-click="selectParentFolder(folder.path)"
      style="cursor: pointer;">
    {{folder.name}}
  </li>
</ul>

<!-- 子文件夹列表：仅当选中父目录时显示，且只展示匹配的子项 -->
<ul ng-if="selectedParent">
  <li ng-repeat="child in childFolders | filter:filterChildItems">
    {{child.path}}
  </li>
</ul>

逻辑说明 #

• 点击父目录时，我们把它的path存储到$scope.selectedParent里；
• 过滤函数filterChildItems会检查每个子文件夹的路径：
  1. 是否以选中的父路径开头（确保是该目录下的项）；
  2. 要么和父路径完全一致（显示父目录本身，符合你例子里的需求），要么层级更深（显示子文件夹）；
• 这样点击/visualizer/2D时，就只会展示/visualizer/2D、/visualizer/2D/Ferb、/visualizer/2D/John这些匹配的项了。

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