Question

我想只重复这个单击的目录文件夹。这是我的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="more_folders();">{{fol}}</a>
                        <br />
                        <a style="cursor:default;color:black;" ng-repeat="more in more_folders | filter:fol">
                        <ul>
                          <li>{{more}}</li>
                        </ul>
                        </a>
                    </li>
                </ul>
            </li>

JS：

  $scope.getfolders = function(){
        $http({
            method: 'GET' ,
            url: 'link_folders.json',
        })
            .then(function successCallback(data) {
                console.log("folders");
                $scope.folders = data.data;

            }, function errorCallback(response) {
                console.log(response);
                console.log('error');
            });
    };
    $scope.getfolders();

    $scope.more_folders = function(){
        $http({
            method: 'GET' ,
            url: 'more_folders.json',
        })
            .then(function successCallback(data) {
                console.log("more_folders");
                $scope.more_folders = data.data;

            }, function errorCallback(response) {
                console.log(response);
                console.log('error');
            });
    };

link_folders.json：

[
    "/visualizer/360", 
    "/visualizer/2D"
]

more_folders.json：

[
    "/visualizer/360/Eva", 
    "/visualizer/2D/Ferb", 
    "/visualizer/360/Andy", 
    "/visualizer/2D/John"
]

我的傻瓜：https://www.bing.com/tspeak?&format=audio%2Fmp3&language=

我想在点击的more_folders下列出folder，而不是在每个folders下面提前感谢您的回答！

Answer 1

要创建切换类型文件夹结构，您需要在控制器中的某个位置维护所选文件夹。因此，您知道单击了哪个文件夹，如果再次单击，则可以切换它。

以下是如何做到这一点。

var miAp = angular.module('miAp', []);

miAp.controller('miControlador', function($scope, $http) {

  var vm = this;

  $scope.getfolders = function() {
    $scope.folders = [
      "/visualizer/360",
      "/visualizer/2D"
    ];

  };
  $scope.getfolders();

  $scope.more_folders = function() {

    $scope.more_folders = [
      "/visualizer/360/Eva",
      "/visualizer/2D/Ferb",
      "/visualizer/360/Andy",
      "/visualizer/2D/John"
    ];
  };
  $scope.more_folders();

  $scope.selectedFol = null;

  $scope.toggle = (fol) => {
    if ($scope.selectedFol === fol) {
      $scope.selectedFol = null;
    } else {
      $scope.selectedFol = fol;
    }
  };
});

<html>

<head>
  <meta charset="utf-8">
  <title>Cookies</title>
  <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
  <script src="cookies.js"></script>
</head>

<body ng-app="miAp">
  <div class="container" ng-controller="miControlador">





    <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="toggle(fol);">{{fol}}</a>
          <br />
          <div id="childFolders" ng-show="selectedFol === fol">
            <a style="cursor:default;color:black;" ng-repeat="more in more_folders | filter:fol">
              <ul>
                <li>{{more}}</li>
              </ul>
            </a>
          </div>
        </li>
      </ul>
    </li>


  </div>
</body>

</html>

PS：如果您想要切换根文件夹，那么您可以以相同的方式为root维护另一个变量。

列出单击文件夹下的文件夹

1 个答案: