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:
