I found a solution on this S.O. question to toggle a class using ng-click in AngularJS. Specifically, I am trying to show a Font Awesome closed folder icon when a list element is not clicked and an open folder icon when the list element is clicked within a nested menu structure. The toggling of icons works correctly when opening and closing submenus by clicking. However, after clicking on other list elements, their icons change as expected while the original opened folder icon remains visible for items that have been closed.
To resolve this issue, I want to toggle the class for all other list elements displaying the open folder icon back to the closed folder icon when one item is clicked. How can I achieve this functionality? Refer to the provided screenshot illustrating the problem:
You can see the code snippet I'm using to toggle the class below:
<a ng-click="folderOpen = !folderOpen" href="#">
<i ng-class="folderOpen ? 'fa fa-folder-open-o' : 'fa fa-folder-o'"></i>
<{ item.pretty_name }>
</a>
I need a way to toggle the classes from 'fa fa-folder-open-o' to 'fa fa-folder-o' for all list elements whenever any anchor element is clicked. How should I approach implementing this?
For more context, here is the surrounding code snippet that generates the list elements within the menus:
<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>