AngularJS toggle class using ng-class for multiple elements

Question

I'm using solution 2 posted in this S.O. question to toggle a class with ng-click. In my case, I want to display a Font Awesome closed folder icon when a list element is not clicked and display a open folder icon when the list element is clicked. This takes place in a nested menu sequence. It works fine when the list element is clicked to open its submenu and clicked again to close to the submenu: the folder icon changes from closed to open and vice-versa:

However, if the other list elements are clicked, their icon changes as expected. The problem is the original folder open icon still displays for the menu items that have closed. I would like to toggle the class on all the other list elements that have open folders to the closed folder class again and I'm not sure how to do that. How can I toggle the classes for all my other list elements displaying the open folder class to closed folder class when one of the others is clicked? See the screenshot below for what I mean about the other folders showing the open class after I've clicked the first two and then the third:

This is the code I'm using the toggle the 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>

I'd like to toggle all the classes that have 'fa fa-folder-open-o' to 'fa fa-folder-o' when one of the other anchor elements is clicked. How do I do that?

Edit: per request I have added the surrounding code that creates the list elements, that's pretty much all the code I have to generate the menus (should I include the html head, body & aside elements too?! :) There's nothing special in my controller code either:

  <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>

Do you think we can solve your question with the code you have posted? I believe you need to post more. Please try creating a minimal reproducible example and explain. — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Mar 3, 2016 at 10:04

Boris Parnikel · Accepted Answer · 2016-03-03 10:51:05Z

Create for each of your nodes some field like 'isExpanded' and on ng-click on this element toggle value of this field for current node. So it would be something like this:

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)
        }
    })
};

template:

<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>

Keep in mind that if you don't know something about folder tree characteristics like deep and etc., you should to create 2 directives: [tree] (for all tree) and [tree-node] for each of node. With this directives you will have ability to create trees of any structure

whatoncewaslost · Accepted Answer · 2016-03-03 10:29:34Z

0

It's hard to tell with the code you've posted, but one guess is that ng-click won't work like that. ng-click was meant to call and invoke methods, not to define pieces of logic on the body. Angular probably sees the stuff you've defined in ng-click and doesn't know how to interpret it. Move your logic to your scope.

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

And then change your html to reflect that.

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

answered Mar 3, 2016 at 10:29

whatoncewaslost

2,2562 gold badges20 silver badges26 bronze badges

3 Comments

user45183 Over a year ago

Thanks for the response. That works too to toggle the class. However, the problem I'm running into is when one of the other list elements is clicked, thereby expanding that submenu, the previously opened submenus close, however, they still displays the original class with the open folder icons (see the second screenshot). I'd like to somehow change all the classes to the closed folder icon when another one is opened. I hope that makes sense.

user45183 Over a year ago

I guess what I need to do is find if there's a way to conditionally check whether a certain class is present in the element in my controller. Is there a way to check whether a class is present in an element in my controller in an idiomatic angular way instead of relying on jquery to iterate through the list elements checking for the presence of the open folder class to set them all to closed?

whatoncewaslost Over a year ago

You generally wouldn't want to do that. Angular controllers shouldn't have any information about classes, they should ideally just control what piece of information they get from the view.

Collectives™ on Stack Overflow

AngularJS toggle class using ng-class for multiple elements

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related