How to add and remove active class on click - angular way

Question

I am doing like this

 <div class="tiles" ng-repeat="stat in states" ng-click="select(stat)" ng-class="{active: isActive(stat)}">
    ....
    </div>

//controller

$scope.select= function(item) {
    $scope.selected = item; 
};

 $scope.isActive = function(item) {
      return $scope.selected === item;

};

clicking on tiles it is adding active class and clicking on other tiles removing from first tiles and adding to another tiles.It is working as expected .But what i am trying to achieve is clicking on same tiles again i have to remove active class ,clicking on again i have to add like toggling .But no idea how to achieve this .Please help

Community · Accepted Answer · 2018-09-25 07:54:00Z

3

Update your select function to set the selected property to null if it's already selected:

$scope.select = function(item) {
    $scope.selected = ($scope.selected === item ? null : item); 
};

JSFiddle Example

http://jsfiddle.net/bATZ5/

edited Sep 25, 2018 at 7:54

CommunityBot

11 silver badge

answered Jun 29, 2014 at 8:00

Miguel

20.7k5 gold badges47 silver badges68 bronze badges

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

Comments

Ben · Accepted Answer · 2014-06-29 07:54:59Z

2

just change your code to this:

$scope.select= function(item) {
    if (item === $scope.selected) {
        $scope.selected = null;
    } else {
        $scope.selected = item;
    }

};

answered Jun 29, 2014 at 7:54

Ben

10.3k21 gold badges104 silver badges159 bronze badges

Collectives™ on Stack Overflow

How to add and remove active class on click - angular way

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related