javascriptjqueryangularjsangularjs-ng-clickangularjs-ng-class

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 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');
        });

   });

Solution

  • 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>