如何使用AngularJS切换类？

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

方法1：

• 在此示例中，单击按钮后，元素的类将更改。
• 因此，单击按钮时会调用一个函数。
• 该函数将类从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(从true到false，反之亦然)。
• 在调用的函数，我们只需检查它是否为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
            
        
    

  

输出：