Search code examples
htmlangularjsclasstoggleclass

Change span class on click angularjs

Good day! I have a span in my code. The class contains image that is displayed via span. Once the user clicked the image, its class should change and when another span is clicked, it should go back to the original class

 <span alt="Mode1" ng-class="{'mode': isActive}" ng-click="activeButton()"  ></span></span>

on my controller 

  $scope.isActive = false;
  $scope.activeButton = function() {
    $scope.isActive = !$scope.isActive;
  }

It is already working but my problem is on the load there is nothing displayed and it only shows when I click it. Im using angularjs btw

Solution

  • If you have a toggle on ng-click then just change the ng-class by this.

    ng-class="{'mode': isActive, 'classThatIsSupposedToBeShownOnInActive': !isActive}"

    Then it should display the class you want on load and show mode class on ng-click

    Hope it helps.