javascript - AngularJS 使用 ng-class 切换多个元素的类

Question

我正在使用此 S.O. question 中发布的解决方案 2使用 ng-click 切换类。就我而言，我想在未单击列表元素时显示 Font Awesome 关闭文件夹图标，并在单击列表元素时显示打开的文件夹图标。这发生在嵌套菜单序列中。当单击列表元素打开其子菜单并再次单击关闭子菜单时，它工作正常:文件夹图标从关闭变为打开，反之亦然:

但是，如果单击其他列表元素，它们的图标会按预期发生变化。问题是对于已关闭的菜单项，仍显示原始文件夹打开图标。我想再次将所有其他具有打开文件夹的列表元素上的类切换到关闭的文件夹类，但我不知道该怎么做。 当单击其他列表元素之一时，如何将显示打开文件夹类的所有其他列表元素的类切换为关闭文件夹类？请参阅下面的屏幕截图，了解我对显示打开文件夹类的其他文件夹的含义。单击前两个然后第三个后打开类(class):

这是我使用切换类的代码:

<a ng-click="folderOpen = !folderOpen" href="#">
  <i ng-class="folderOpen ? 'fa fa-folder-open-o' : 'fa fa-folder-o'"></i>
  <{ item.pretty_name }>
</a>

当单击其他 anchor 元素之一时，我想将所有具有“fa fa-folder-open-o”的类切换为“fa fa-folder-o”。我该怎么做？

编辑:根据请求，我添加了创建列表元素的周围代码，这几乎是我生成菜单所需的所有代码(我是否也应该包含 html head、body 和side 元素？!:) 没有什么我的 Controller 代码中有特殊之处:

  <li ng-repeat="item in data.dirs" metis="">
    <a ng-click="folderOpen = !folderOpen" href="#">
      <i ng-class="folderOpen ? 'fa fa-folder-open-o' : 'fa fa-folder-o'"></i>
      <{ item.pretty_name }>
    </a>
    <ul class="nav nav-second-level metismenu">
      <li ng-repeat="item2 in item.files" metis="">
        <a href="#">
          <i class="fa fa-file"></i>
          <{ item2.pretty_name }>
        </a> 
      </li> 
    </ul>
  </li>

Answer 1

为每个节点创建一些字段，例如“isExpanded”，然后单击此元素为当前节点切换该字段的值。所以它会是这样的:

Controller :

// In init function
initDirs($scope.data.dirs)
....
function initDirs (dirs) {
    angular.forEach(dirs, function(dir) {
        dir.isExpanded = false;
        if (dir.children.length) {
            initDirs(dir.children)
        }
    })
};

模板:

<li ng-repeat="item in data.dirs" metis="">
    <a ng-click="item.isExpanded= !item.isExpanded" href="#">
        <i ng-class="item.isExpanded ? 'fa fa-folder-open-o' : 'fa fa-folder-o'"></i>
        <span>{{ item.name }} </span>
    </a>
    <ul ng-show="item.isExpanded">
        <!-- Child nodes here -->
    </ul
</li>

请记住，如果您不了解文件夹树的特征(例如深度等)，则应该创建 2 个指令:[tree](针对所有树)和针对每个节点的 [tree-node]。使用此指令，您将能够创建任何结构的树