使用 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 从blue 更改为 green 。

  

    
    
  
    
        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
        
    

  

输出：