如何使用 AngularJS 切换类？

在本文中，我们将借助 AngularJS 切换元素的类。

方法一：

• 在这个例子中，当一个按钮被点击时，元素的类就会改变。
• 因此，单击按钮时会调用一个函数。
• 该函数将类从val切换到 !val （意味着 0 到 1，反之亦然）。
• 在调用的函数，我们只需检查它是否为 class1，然后将其更改为 class2，否则进行相反的操作。

示例 1：

HTML

  

    
    
  
    
        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;
                    }
                };
            });
    
  
    
        .class1 {
            color: white;
            background: blue;
        }
  
        .class2 {
            color: white;
            background: green;
        }
    

  

    
        GeeksForGeeks
    
  
  
    
        Toggle Class in angularJS
    
  
    
        
            
                {{ val }}
            
            
                Click to toggle class
            
        
    

  

输出：

方法二：

• 此示例与前一个示例有些相似，但使用布尔值代替 0 和 1。
• 因此，单击按钮时会调用一个函数。
• 该函数将类从 val 切换到 !val（表示真到假，反之亦然）。
• 在调用的函数，我们只需检查它是否为 class1，然后将其更改为 class2，否则进行相反的操作。

示例 2：

HTML

  

    
    
  
    
        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;
                    }
                };
            });
    
  
    
        .class1 {
            color: white;
            background: blue;
        }
  
        .class2 {
            color: white;
            background: green;
        }
  
        #div {
            height: 50px;
            width: 130px;
            color: white;
            margin: 0 auto;
        }
    

  

    
        GeeksForGeeks
    
  
  
    
        Toggle Class in angularJS
    
  
    
        
            
                {{ val }}
            
            
                Click to toggle class
            
        
    

  

输出：