CODEWITHSUNDEEP
cssangularjs
Frutis
Frutis

Reputation: 489

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

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";
    };

Upvotes: 1

Views: 489

Answers (4)

Pushpendra
Pushpendra

Reputation: 1712

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>

Upvotes: 1

Nghi Nguyen
Nghi Nguyen

Reputation: 950

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/

Upvotes: 0

typologist
typologist

Reputation: 394

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

Upvotes: 1

Benny Ng
Benny Ng

Reputation: 12456

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/

Upvotes: 0

Related Questions