使用AngularJS单击按钮后如何更改按钮颜色？

创建了一个HTML按钮，任务是在AngularJS的帮助下更改按钮的背景色。

方法：在这种方法中，我们将尝试更改按钮的类或ID，而这些类/ ID的CSS将更改按钮的背景色。

示例1：在此示例中，类从红色更改为绿色。

  

    
    
  
    
        var myApp = angular.module("app", []);
        myApp.controller("controller", function ($scope) {
            $scope.myButton = 'red';
            $scope.changeCol = function () {
                $scope.myButton = "green";
            };
        });
    
    
        .red {
            background: red;
            color: white;
        }
  
        .green {
            background: green;
            color: white;
        }
    

  

    
        GeeksForGeeks
    
    
        How to change the color
        of the button in AngularJS
    
    
        
            
                Click to change
            
        
    

  
 

输出：

示例2：在此示例中，按钮的ID从蓝色更改为绿色。

  

    
    
  
    
        var myApp = angular.module("app", []);
        myApp.controller("controller", function ($scope) {
            $scope.ID = 'blue';
            $scope.changeCol = function () {
                $scope.ID = "green";
            };
        });
    
  
    
        #blue {
            background: blue;
            color: white;
        }
  
        #green {
            background: green;
            color: white;
        }
    

  

    
        GeeksForGeeks
    
    
        How to change the color of
        the button in AngularJS
    
    
        
            
                Click to change
        
    

  

输出：