How To Add And Remove Class With Angularjs?

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 m

Solution 1:

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>

Solution 2:

You can use

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

HTML:

<divclass="button-bar"><aclass="button button-energized"id="weak"ng-click=removeNS()>weak</a><aclass="button button-energized"id="normal"ng-click=removeWS()>normal</a><aclass="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)