Search code examples
javascriptangularjsng-class

how to toggle the child element class using angularjs


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>

Solution

  • 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';
    }