Creó un botón HTML y la tarea es cambiar el color de fondo del botón al presionarlo con la ayuda de AngularJS.
Enfoque: en este enfoque, intentaremos cambiar la clase o la identificación del botón, y el CSS de esas clases/ID cambiará el color de fondo del botón.
Ejemplo 1: En este ejemplo, la clase se cambia de rojo a verde.
<!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>
Producción:
Ejemplo 2: En este ejemplo, la ID del botón se cambia de azul a verde .
<!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>
Producción:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA