How to add and remove class with AngularJS?

Question

I have a few buttons that work like switchers. If you click one it becomes active and "shuts down" other buttons. I did this using jQuery but would like to use AngularJS. Here is my code:

HTML

<div class="button-bar">
    <a class="button button-energized" id="weak">weak</a>
    <a class="button button-energized" id="normal">normal</a>
    <a class="button button-energized" id="strong">strong</a>
</div>

JavaScript

    .controller('AppCtrl', function($scope, $stateParams) {

        $('#weak').click(function() {
            $('#weak').addClass('active');
            $('#normal').removeClass('active');
            $('#strong').removeClass('active');
        });

        $('#normal').click(function() {
            $('#normal').addClass('active');
            $('#weak').removeClass('active');
            $('#strong').removeClass('active');
        });

        $('#strong').click(function() {
            $('#strong').addClass('active');
            $('#normal').removeClass('active');
            $('#weak').removeClass('active');
        });

   });

Mathieu de Lorimier · Accepted Answer · 2016-04-26 02:45:25Z

21

You could have ng-click that can toggle selected flag, that could be use with ng-class to bind / unbind class.

Markup

<div class="button-bar">
    <a class="button button-energized" id="weak" 
       ng-class="{active: $parent.selected=='weak'}" ng-click="$parent.selected='weak'">
      weak
    </a>
    <a class="button button-energized" id="normal" 
       ng-class="{active: selected=='normal'}" ng-click="selected='normal'">
        normal
    </a>
    <a class="button button-energized" id="strong" 
       ng-class="{active: selected=='strong'}" ng-click="selected='strong'">
        strong
    </a>
</div>

Working Fiddle

Better way

You could easily do this by using ng-repeat which will reduce your line of code.

Markup

$scope.strengths = ["weak","normal","strong"];

Code

<div class="button-bar">
    <a class="button button-energized" id="{{strength}}" 
       ng-class="{active: $parent.selected == strength}" 
       ng-click="$parent.selected=strength"
       ng-repeat="strength in strengths">
      {{strength}}
    </a>
</div>

edited Apr 26, 2016 at 2:45

Mathieu de Lorimier

1,0153 gold badges20 silver badges33 bronze badges

answered Aug 7, 2015 at 8:02

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

4 Comments

Pankaj Parkar Over a year ago

@soosmca Thanks mate for the fiddle

Soul Eater Over a year ago

The first example is cool, how can I make it work with the first option with "active" class by default?

Pankaj Parkar Over a year ago

@SoulEeater what do you mean by active class by default?

Soul Eater Over a year ago

@PankajParkar what I mean is that if I want the first option (in the fiddle example: "weak") to be colored red at the moment you open the page: The first option already selected by default.

Prashant Prabhakar Singh · Accepted Answer · 2017-06-27 07:30:11Z

You can use

angular.element(document.querySelector("#cntrlID")).removeClass("customclass");

HTML:

<div class="button-bar">
    <a class="button button-energized" id="weak" ng-click=removeNS()>weak</a>
    <a class="button button-energized" id="normal" ng-click=removeWS()>normal</a>
    <a class="button button-energized" id="strong" ng-click=removeWN()>strong</a>
</div>

Angular

$scope.removeNS = function(){
    angular.element(document.querySelector("#normal")).removeClass("active");
    angular.element(document.querySelector("#strong")).removeClass("active");
}
$scope.removeWS = function(){
    angular.element(document.querySelector("#weak")).removeClass("active");
    angular.element(document.querySelector("#strong")).removeClass("active");
}
$scope.removeWN = function(){
    angular.element(document.querySelector("#weak")).removeClass("active");
    angular.element(document.querySelector("#normal")).removeClass("active");
}

Further to optimize, you can just create a single function and pass the query selectors and class to remove as the function parameter, like:

function(id1,id2,removeClassName)

Collectives™ on Stack Overflow

How to add and remove class with AngularJS?

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related