How to change class separately for each element? (Angular)

Question

I have a demo when on click it changes the class back and worth, but I can't figure it out how to change them separately.

Here's a demo for better explanation: http://jsfiddle.net/pWG2S/1260/

I could add similar line of code to the js with class2, class3 etc, but the problem is that this class will be repeated a lot of times. If you have any ideas on how to fix this problem that would be great. Thank you in advance

$scope.changeClass = function(){
        if ($scope.class === "rotated")
            $scope.class = "rotated2";
        else
            $scope.class = "rotated";
    };

Usually your repeating elements would be associated to repeating data structure in scope model. Then you can use properties of each item to help determine appropriate class. Would seem you have over simplified the demo. What is your real world use case? — charlietfl
– charlietfl, Commented Jun 13, 2016 at 3:23
I am making collapsible content, when you click svg image it rotates -90degress, the problem is if I click any svg, the class change is applied for every svg. — Frutis
– Frutis, Commented Jun 13, 2016 at 3:30
Ok.... but are the content sections/svg not rendered based on data model in controller? That is how angular apps typically work — charlietfl
– charlietfl, Commented Jun 13, 2016 at 3:33
In controller you will only find the example I wrote above, nothing else regarding the svg. — Frutis
– Frutis, Commented Jun 13, 2016 at 3:36
OK. So you need a data model in controller and then use that for individual svg. Or write a directive that wraps repeating UI componnents. Then each directive instance would have it's own scope.class isolated from the others — charlietfl
– charlietfl, Commented Jun 13, 2016 at 3:39

typologist · Accepted Answer · 2016-06-13 03:55:57Z

1

Just change class to be an array and then pass each index:

$scope.changeClass = function(i){
    if ($scope.class[i] === "red")
        $scope.class[i] = "blue";
     else
        $scope.class[i] = "red";
};

Fiddle here

answered Jun 13, 2016 at 3:55

typologist

3943 silver badges10 bronze badges

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

3 Comments

Frutis Over a year ago

Hey, your answer is correct in a way, but now there is another problem. prntscr.com/bfpu35 . If I click red square it will change for every ng-repeat element. Any ideas how to fix that?

Frutis Over a year ago

I will mark your answer as a correct one, you did basically what i wanted. I will probably create a new thread regarding another problem I have now. Cheers

typologist Over a year ago

Sure, post a new one (probably there's another class you are using for your arrows' color?).

Pushpendra · Accepted Answer · 2016-06-13 06:38:52Z

HTML:

<body ng-app="ap" ng-controller="con">
    <div ng-class="class">{{class}}</div>
    <button id="button1" ng-click="changeClass($event)">Change Class</button>   
   <div ng-class="class1">{{class1}}</div>
    <button id="button2" ng-click="changeClass($event)">Change Class</button>   
</body>

JS:

var app = angular.module("ap",[]);

app.controller("con",function($scope){

$scope.class = "red";
$scope.class1 = "red";
$scope.changeClass = function(event){
console.log(event.currentTarget.id);
if(event.currentTarget.id === "button1")
    if ($scope.class === "red")
        $scope.class = "blue";
        else
          $scope.class = "red";
     else if(event.currentTarget.id === "button2")
         if ($scope.class1 === "red")
        $scope.class1 = "blue";
        else
          $scope.class1 = "red";
    };
   });

Fiddle

I should have refactored the code a bit more. However my initial idea is that you will need to pass in $event along with your ng-click and provide id's to button in order to uniquely identify them through event.currentTarget.id

Also the fiddle of Nghi Nguyen makes more sense to do it with directive since your same set of elements for twice. Encapsulate them inside a directive. This way you don't even have to use $event to determine your button's id and the controller will only handle changeClass for a particular directive.

EDIT1:

var app = angular.module("ap",[]);

app.controller("con",function($scope){

$scope.class = "red"; // default class

 $scope.changeClass = function($event){
    if ($($event.target).prev().hasClass('red')) {
    $($event.target).prev().removeClass('red').addClass('blue');
  } else {
    $($event.target).prev().removeClass('blue').addClass('red');
  }
  };
 });

HTML:

<body ng-app="ap" ng-controller="con">
    <div ng-class="class">{{class}}</div>
    <button ng-click="changeClass($event)">Change Class</button>   
   <div ng-class="class">{{class}}</div>
    <button ng-click="changeClass($event)" >Change Class</button>   
</body>

Hey, thanks for you answer. I would like to avoid adding any more attributes. There should be a lot easier ways to do this, like typologist wrote. I think your answer would have the same problem as I commented on his answer.
Sorry, but it doesn't work. Could you take a look at typologist answer and look at the current problem?
Please post the link when you make you a new thread for your issue

Benny Ng · Accepted Answer · 2016-06-13 03:40:30Z

How about this?

Controller

var app = angular.module("ap",[]);

app.controller("con",function($scope){

    $scope.klasses = ["red", "blue", "yellow"];
    $scope.klassIndex = 0;

    $scope.changeClass = function(){
        var newKlassIndex = ($scope.klassIndex+1)%$scope.klasses.length;
        $scope.klassIndex = newKlassIndex;
    };
});

View

<body ng-app="ap" ng-controller="con">
  <div ng-repeat="klass in klasses">
    <div ng-class="klasses[klassIndex]">{{klasses[klassIndex]}}</div>
    <button ng-click="changeClass()">Change Class</button>
  </div>
</body>

This way new class can be added to $scope.klasses, with new corresponding CSS rule.

Working Demo
http://jsfiddle.net/pWG2S/1267/

Maybe you misunderstood my question, my goal is to make that on click every button would change separately, now they just all change at once, same problem that I have shown in my demo.

Nghi Nguyen · Accepted Answer · 2016-06-13 04:19:52Z

0

Let think about make directive for each section :

<div ng-class="class">{{class}}</div>
<button ng-click="changeClass()">Change Class</button>

Then you can control scope inside each directive and it will be easy for you to extend later.

This is example : http://jsfiddle.net/pWG2S/1271/

edited Jun 13, 2016 at 4:19

answered Jun 13, 2016 at 3:34

Nghi Nguyen

9586 silver badges11 bronze badges

3 Comments

Frutis Over a year ago

um sorry don't understand what you mean by that, the code you wrote it's exactly the same as in my example.

Nghi Nguyen Over a year ago

Terrible guys. I try to make example take me little time but hope can help you : jsfiddle.net/pWG2S/1271

Frutis Over a year ago

I'm not sure if this works, but in my case I cannot use any templates, it should look for class="class". Typologist answer almost works as intended.

Collectives™ on Stack Overflow

How to change class separately for each element? (Angular)

4 Answers 4

3 Comments

3 Comments

1 Comment

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

3 Comments

1 Comment

3 Comments

Related