Как изменить цвет кнопки после нажатия с помощью AngularJS?
Опубликовано: 25 Февраля, 2022
Создана кнопка HTML и задача - изменить цвет фона кнопки при нажатии с помощью AngularJS.
Подход: в этом подходе мы попытаемся изменить класс или идентификатор кнопки, и CSS этих классов / идентификаторов изменит цвет фона кнопки.
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> |
Выход:
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> |
Выход:
