如何在AngularJS中操作JSON路径并实现点击路径创建文件夹？

看起来你已经搭好了文件浏览的基础框架，现在只需要把「当前路径」和「创建文件夹」的逻辑打通就行，我来一步步给你梳理清楚：

第一步：维护当前选中的路径 #

首先我们需要在控制器里存下当前浏览的路径，这样创建文件夹时才明确要在哪个位置生成新文件夹。修改你的getFiles函数，把传入的path存到$scope.currentPath中：

$scope.getFiles = function (path) {
  $scope.currentPath = path; // 新增这行，记录当前所在路径
  var Obj = { path: path };
  console.log(Obj);
  $http.post('http://xyz/api/file/path', Obj).then(function (result) {
    console.log(result);
    $scope.files = result.data.project;
  });
}

第二步：修正模态框的提交逻辑 #

你之前的createFolder('projects/'+files.path)存在问题——files是数组，files.path根本不存在。我们要用上刚才存好的currentPath，修改表单的ng-submit绑定：

<form ng-submit="createFolder(currentPath)"> <!-- 这里改成currentPath -->
  <div class="modal fade" id="createFolderModal" role="dialog">
    <!-- 模态框头部内容保持不变 -->
    <div class="modal-body">
      <input type="text" name="directory" ng-model="createfolder" placeholder="请输入文件夹名称">
    </div>
    <!-- 模态框底部内容保持不变 -->
  </div>
</form>

第三步：添加创建文件夹的触发按钮 #

你需要在页面上添加打开模态框的按钮，这里提供两种方案：

方案1：全局创建按钮（在当前浏览路径下创建）

在文件列表上方添加一个全局按钮，点击后打开模态框：

<!-- 放在文件列表的最上方 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#createFolderModal" style="margin:10px">
  <span class="glyphicon glyphicon-plus"></span> 创建新文件夹
</button>

<!-- 原有的路径导航和文件列表代码保持不变 -->
<div ng-repeat="t in main.path" style="padding:10px; float:left">
  <button type="button" class="btn btn-default" ng-click="getFiles(t.path)">
    <span class="glyphicon glyphicon-folder-close" style="padding-right:10px"></span>{{t.name}}
  </button>
</div>
<!-- ... 其他文件列表代码 ... -->

方案2：给每个文件夹添加子文件夹创建按钮

如果需要给单个文件夹创建子目录，可以在文件夹按钮旁新增按钮：

<div ng-repeat=" t in files" style="clear:both">
  <button type="button" class="btn btn-default" ng-if="t.children==true" ng-click="getFiles('projects/'+t.path)" style="margin:10px">
    <span class="glyphicon glyphicon-folder-close" style="padding-right:10px"></span>{{t.name}}
  </button>
  <!-- 新增创建子文件夹按钮 -->
  <button type="button" class="btn btn-success" ng-if="t.children==true" data-toggle="modal" data-target="#createFolderModal" ng-click="currentPath='projects/'+t.path" style="margin:10px">
    <span class="glyphicon glyphicon-plus"></span> 新建子文件夹
  </button>
  <!-- 原有的下载按钮保持不变 -->
  <a href="http://xyz.ngrok.io/{{t.path}}" download class="btn btn-default" role="button" ng-if="t.children==false" style="margin:10px">
    <i class="fas fa-folder">download</i> {{t.name}}
  </a>
</div>

第四步：完善createFolder函数 #

把你注释掉的API调用打开，并且在创建成功后刷新当前文件列表，让新文件夹立刻显示出来：

$scope.createFolder = function (path) {
  var create = {
    createfolder: $scope.createfolder,
    path: path, // 这里的path就是当前选中的路径
  };
  console.log(create);
  $http.post('http://xyz/api/createfolder', create).then(function (result) {
    console.log(result);
    // 创建成功后，重新获取当前路径的文件列表，刷新页面
    $scope.getFiles(path);
    // 清空输入框并关闭模态框
    $scope.createfolder = '';
    $('#createFolderModal').modal('hide');
  }).catch(function(error) {
    // 处理错误情况，比如提示用户创建失败
    console.error('创建文件夹失败:', error);
  });
}

最后检查点 #

• 确保后端APIhttp://xyz/api/createfolder能正确接收createfolder（文件夹名称）和path（父路径）参数，并且能在对应路径下完成文件夹创建。
• 确认页面已经引入Bootstrap的JavaScript文件，否则模态框无法正常弹出。

这样调整后，你点击对应路径进入文件夹，再点击创建按钮，就能在当前路径下生成新文件夹，页面也会自动刷新显示新内容啦！

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