Change span class on click angularjs

Question

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

What do you mean by nothing is displayed There is only one span and if it is not there where do you click. Explain your problem in detail and post the relevant code in the post. — Jenish Rabadiya
– Jenish Rabadiya, Commented Apr 1, 2016 at 5:55
Where is the class that you have to show on load? If mode class is shown on ng-click? — M. Junaid Salaat
– M. Junaid Salaat, Commented Apr 1, 2016 at 5:58
@JenishRabadiya the span shows images when it is click the colored image counterpart should be shown but my code above displays nothing only after I clicked it, the colored counterpart is shown — bleyk
– bleyk, Commented Apr 1, 2016 at 6:02
@mJunaidSalaat, I think thats my problem because on load, the class that is supposed to be shown is none, How will I put that? — bleyk
– bleyk, Commented Apr 1, 2016 at 6:03

M. Junaid Salaat · Accepted Answer · 2016-04-01 06:09:31Z

0

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.

answered Apr 1, 2016 at 6:09

M. Junaid Salaat

3,8031 gold badge25 silver badges27 bronze badges

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

6 Comments

bleyk Over a year ago

Thanks It worked! but how about when I click a different span? the class should go back to the original state

M. Junaid Salaat Over a year ago

You just have to toggle the $scope.isActive boolean to false on another span click. :)

M. Junaid Salaat Over a year ago

Try this <span ng-click="anotherSpanClick()" id="differentSpan">Different Span Content</span> $scope.anotherSpanClick = function(){$scope.isActive = false;}

bleyk Over a year ago

hi again @mJunaidSalaat can I ask again for your help?

bleyk Over a year ago

I have another problem that seems to be the same as this one but my problem now is how can I change the class of a certain button upon selecting a certain radiobutton? @mJunaidSalaat

|

Collectives™ on Stack Overflow

Change span class on click angularjs

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related