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

Question

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

但是，如果单击其他列表元素，则其图标会按预期更改。问题是原始文件夹打开图标仍然显示已关闭的菜单项。我想将具有打开文件夹的所有其他列表元素的类再次切换到已关闭的文件夹类，我不知道该怎么做。 当点击其中一个时，如何将显示打开文件夹类的所有其他列表元素的类切换到关闭的文件夹类？请参阅下面的屏幕截图，了解我对其他显示文件夹的文件夹的含义在我点击前两个然后是第三个之后公开课：

这是我正在使用切换类的代码：

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

当单击其中一个锚元素时，我想将所有具有'fa fa-folder-open-o'的类切换为'fa fa-folder-o'。我该怎么做？

编辑：每个请求我添加了创建列表元素的周围代码，这几乎是生成菜单所需的所有代码（我应该包括html头，body＆amp; aside元素吗？！:)这里有我的控制器代码也没什么特别的：

  <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'，然后点击此元素，为当前节点切换此字段的值。所以它会是这样的：

控制器：

// 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]用于每个节点。使用此指令，您将能够创建任何结构的树

Answer 2

很难用您发布的代码来判断，但有一种猜测是ng-click不会像那样工作。 ng-click意味着调用和调用方法，而不是在body上定义逻辑片段。 Angular可能会看到您在ng-click中定义的内容并且不知道如何解释它。将你的逻辑移到你的范围。

$scope.changeFolder = function(){
    $scope.folderOpen = !$scope.folderOpen;
}

然后更改你的html以反映这一点。

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