使用ng-class的多個元素的AngularJS切換類

Question

我使用發佈在此S.O. question中的解決方案2以ng-click切換類。在我的情況下，我想在未單擊列表元素時顯示Font Awesome closed folder圖標，並在列表元素單擊時顯示打開的文件夾圖標。這發生在一個嵌套的菜單序列中。從關閉的文件夾圖標更改爲打開，反之亦然：

但是，如果其他列表時，列表元素被點擊打開子菜單，再點擊關閉子菜單，它工作正常元素被點擊，他們的圖標按預期改變。問題是原始文件夾打開圖標仍顯示已關閉的菜單項。我想將所有已打開文件夾的其他列表元素上的類再次切換到已關閉的文件夾類，但我不確定該如何操作。 當其他人被點擊時，如何將顯示打開文件夾類的所有其他列表元素的類切換到封閉文件夾類？請參見下面的屏幕截圖我的意思有關顯示，我點擊了前兩個之後的公開課的其他文件夾，然後第三：

這是我使用的撥動代碼類：

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

我想切換所有有「發發文件夾打開-O」的類「發發文件夾-O」被點擊其他錨元素之一時。我怎麼做？

編輯：每個請求我已經添加了創建列表元素的周邊代碼，這幾乎是所有的代碼，我必須生成菜單（我應該包括html頭，身體&旁邊的元素呢？！:)有沒有什麼特別的我的控制器代碼：

<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個指令：[樹]（對於所有樹）和[樹節點]。有了這個指令，你將能夠創建任何結構的樹木

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>