how to toggle the child element class using angularjs

Question

on click on anchor how to toggle the child span element classes?

I already have one click function on my anchor: on click how to togle "glyphicon-chevron-down" to "glyphicon-chevron-up" ?

    <a ng-click="toggleList()">
     View More <span class="glyphicon glyphicon-chevron-down"></span>
    </a>

Pankaj Parkar · Accepted Answer · 2015-12-29 09:01:04Z

1

You could have

Markup

<a ng-click="toggleList()">
     View More <span class="glyphicon" ng-class="getClass()"></span>
</a>

Code

$scope.toggleList = function(){
   //other logic here
   $scope.isDown = !$scope.isDown; 
}

$scope.getClass = function(){
    return $scope.isDown ? 'glyphicon-chevron-down': 'glyphicon-chevron-up';
}

edited Dec 29, 2015 at 9:01

answered Dec 29, 2015 at 7:48

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Krish Over a year ago

It not works: by default it comes with 'up' but on click its not toggling!! :) <a ng-click="toggleList(isDown)"> View More <span class="glyphicon" class="glyphicon" ng-class="getClass(isDown)"></span> </a>

Krish Over a year ago

are we need to keep this $scope.getClass within the toggleList function ?

Pankaj Parkar Over a year ago

@Krish $scope is basically used for binding and then you can use scope variable on html directly in angular directives.

Collectives™ on Stack Overflow

how to toggle the child element class using angularjs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related