How to toggle class using AngularJS ?

In this article, we will toggle the class of an element with the help of AngularJS.

Approach 1: 

  • In this example, when a button is clicked then the class of an element is changed. 
  • So, a function is called when the button is clicked. 
  • That function toggles the class from val to !val(means 0 to 1 and vice-versa). 
  • In the function called, we simply check if it class1 then change it to class2 else do the opposite.

Example 1:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML>
<html>
  
<head>
    <script src=
    </script>
  
    <script>
        var myApp = angular.module("app", []);
        myApp.controller("controller",
            function ($scope) {
                $scope.val = 0;
                $scope.toggleClass = function (sel) {
                    if ($scope.val == 0) {
                        $scope.val = 1;
                    }
                    else {
                        $scope.val = 0;
                    }
                };
            });
    </script>
  
    <style>
        .class1 {
            color: white;
            background: blue;
        }
  
        .class2 {
            color: white;
            background: green;
        }
    </style>
</head>
  
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
  
  
    <p>
        Toggle Class in angularJS
    </p>
  
    <div ng-app="app">
        <div ng-controller="controller">
            <div ng-class="{'class1':!val, 
                'class2': val}">
                {{ val }}
            </div>
            <a href="javascript:void(0);" 
                ng-click='toggleClass();'>
                Click to toggle class
            </a>
        </div>
    </div>
</body>
  
</html>

chevron_right


Output:



Approach 2: 

  • This example is somewhat similar to the previous one but used boolean values in place of 0 and 1. 
  • So, a function is called when the button is clicked. 
  • That function toggles the class from val to !val(means true to false and vice-versa). 
  • In the function called, we simply check if it class1 then change it to class2 else do the opposite.

Example 2:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML>
<html>
  
<head>
    <script src=
    </script>
  
    <script>
        var myApp = angular.module("app", []);
        myApp.controller("controller",
            function ($scope) {
                $scope.val = true;
                $scope.toggleClass = function (sel) {
                    if ($scope.val == true) {
                        $scope.val = false;
                    }
                    else {
                        $scope.val = true;
                    }
                };
            });
    </script>
  
    <style>
        .class1 {
            color: white;
            background: blue;
        }
  
        .class2 {
            color: white;
            background: green;
        }
  
        #div {
            height: 50px;
            width: 130px;
            color: white;
            margin: 0 auto;
        }
    </style>
</head>
  
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
  
  
    <p>
        Toggle Class in angularJS
    </p>
  
    <div ng-app="app">
        <div ng-controller="controller">
            <div id='div' ng-class=
                "{'class1':!val, 'class2': val}">
                {{ val }}
            </div>
            <a href="javascript:void(0);" 
                ng-click='toggleClass();'>
                Click to toggle class
            </a>
        </div>
    </div>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.