AngularJS实现点击指定文件夹仅展示其子文件夹的问题求助

你的核心问题在于目前所有文件夹共享同一个more_folders变量，而且没有标记哪个文件夹被触发展开，所以点击任何一个都会让所有文件夹下都显示子内容。另外，你的方法名more_folders和存储子文件夹的变量名重名了，这会导致第一次点击后方法被覆盖，后续点击直接失效。

下面是修改后的完整解决方案：

1. 调整JavaScript代码 #

首先重命名获取子文件夹的方法，并且给每个文件夹添加独立的状态属性，用来跟踪展开状态和对应的子文件夹：

$scope.getfolders = function(){
  $http({
    method: 'GET' ,
    url: 'link_folders.json',
  })
  .then(function successCallback(data) {
    console.log("folders");
    // 将原字符串数组转为对象数组，给每个文件夹添加状态属性
    $scope.folders = data.data.map(folderPath => ({
      path: folderPath,
      isExpanded: false,
      subfolders: []
    }));
  }, function errorCallback(response) {
    console.log(response);
    console.log('error');
  });
};

$scope.getfolders();

// 重命名方法，避免和变量名冲突
$scope.loadSubfolders = function(folder){
  // 点击已展开的文件夹时直接收起
  if (folder.isExpanded) {
    folder.isExpanded = false;
    return;
  }
  
  $http({
    method: 'GET' ,
    url: 'more_folders.json',
  })
  .then(function successCallback(data) {
    console.log("more_folders");
    // 筛选出当前文件夹下的子文件夹
    folder.subfolders = data.data.filter(subPath => subPath.startsWith(folder.path));
    // 标记当前文件夹为展开状态
    folder.isExpanded = true;
    // 可选：点击新文件夹时自动收起其他已展开的文件夹
    $scope.folders.forEach(f => {
      if (f !== folder) f.isExpanded = false;
    });
  }, function errorCallback(response) {
    console.log(response);
    console.log('error');
  });
};

2. 更新HTML模板 #

修改模板结构，绑定文件夹对象的独立状态，只在被点击的文件夹下显示子内容：

<li class="left-menu-list-submenu">
  <a class="left-menu-link" href="javascript: void(0);" ng-click="getfolders();">
    <i class="left-menu-link-icon fa fa-folder"></i> Catalogs
  </a>
  <ul class="left-menu-list list-unstyled" style="margin-left:20px;" ng-repeat="fol in folders">
    <li>
      <a style="cursor:pointer;" ng-click="loadSubfolders(fol);">
        {{fol.path}}
        <!-- 可选：添加展开/收起状态图标 -->
        <i ng-if="fol.isExpanded" class="fa fa-caret-down"></i>
        <i ng-if="!fol.isExpanded" class="fa fa-caret-right"></i>
      </a>
      <!-- 仅在当前文件夹展开时显示子文件夹列表 -->
      <ul ng-if="fol.isExpanded" style="margin-left:20px; list-style-type: disc;">
        <li ng-repeat="more in fol.subfolders">
          {{more}}
        </li>
      </ul>
    </li>
  </ul>
</li>

关键改动说明 #

• 将原字符串类型的folders数组转为对象数组，每个文件夹拥有独立的isExpanded（展开状态）和subfolders（子文件夹列表）属性，彻底隔离了不同文件夹的状态。
• 重命名获取子文件夹的方法为loadSubfolders，避免了方法与变量重名导致的覆盖问题。
• 点击文件夹时，通过startsWith筛选出属于当前文件夹的子内容，只更新当前文件夹的状态，不会影响其他文件夹。
• 使用ng-if="fol.isExpanded"精准控制子文件夹的显示，只有被点击展开的文件夹才会展示对应的子内容。

这样修改后，点击任意文件夹时，只会在该文件夹下方显示对应的子文件夹，完全符合你的需求。

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