How to change the button color after clicking it using AngularJS ?
Created a HTML button and the task is to change the background color of the button when pressing it with the help of AngularJS.
Approach: In this approach, we will try to change the class or id of the button, and the CSS of those classes/IDs will change the background color of the button.
Example 1: In this example, the class is changed from red to green.
<!DOCTYPE HTML> < html > < head > < script src = "//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js" > </ script > < script > var myApp = angular.module("app", []); myApp.controller("controller", function ($scope) { $scope.myButton = 'red'; $scope.changeCol = function () { $scope.myButton = "green"; }; }); </ script > < style type = "text/css" > .red { background: red; color: white; } .green { background: green; color: white; } </ style > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > GeeksForGeeks </ h1 > < p > How to change the color of the button in AngularJS </ p > < div ng-app = "app" > < div ng-controller = "controller" > < button ng-click = "changeCol()" class = "{{myButton}}" > Click to change </ button > </ div > </ div > </ body > </ html > |
Output:
Example 2: In this example, the ID of the button is changed from blue to green.
<!DOCTYPE HTML> < html > < head > < script src = "//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js" > </ script > < script > var myApp = angular.module("app", []); myApp.controller("controller", function ($scope) { $scope.ID = 'blue'; $scope.changeCol = function () { $scope.ID = "green"; }; }); </ script > < style type = "text/css" > #blue { background: blue; color: white; } #green { background: green; color: white; } </ style > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > GeeksForGeeks </ h1 > < p > How to change the color of the button in AngularJS </ p > < div ng-app = "app" > < div ng-controller = "controller" > < button ng-click = "changeCol()" id = "{{ID}}" > Click to change</ button > </ div > </ div > </ body > </ html > |
Output: