En este artículo, alternaremos la clase de un elemento con la ayuda de AngularJS.
Enfoque 1:
- En este ejemplo, cuando se hace clic en un botón, se cambia la clase de un elemento.
- Entonces, se llama a una función cuando se hace clic en el botón.
- Esa función cambia la clase de val a !val (significa 0 a 1 y viceversa).
- En la función llamada, simplemente verificamos si es class1 y luego la cambiamos a class2; de lo contrario, hacemos lo contrario.
Ejemplo 1:
HTML
<!DOCTYPE HTML> <html> <head> <script src= "https://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.val = 0; $scope.toggleClass = function (sel) { if ($scope.val == 0) { $scope.val = 1; } else { $scope.val = 0; } }; }); </script> <style> .class1 { color: white; background: blue; } .class2 { color: white; background: green; } </style> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <p> Toggle Class in angularJS </p> <div ng-app="app"> <div ng-controller="controller"> <div ng-class="{'class1':!val, 'class2': val}"> {{ val }} </div> <a href="javascript:void(0);" ng-click='toggleClass();'> Click to toggle class </a> </div> </div> </body> </html>
Producción:
Enfoque 2:
- Este ejemplo es algo similar al anterior pero usaba valores booleanos en lugar de 0 y 1.
- Entonces, se llama a una función cuando se hace clic en el botón.
- Esa función cambia la clase de val a !val (significa verdadero a falso y viceversa).
- En la función llamada, simplemente verificamos si es class1 y luego la cambiamos a class2; de lo contrario, hacemos lo contrario.
Ejemplo 2:
HTML
<!DOCTYPE HTML> <html> <head> <script src= "https://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.val = true; $scope.toggleClass = function (sel) { if ($scope.val == true) { $scope.val = false; } else { $scope.val = true; } }; }); </script> <style> .class1 { color: white; background: blue; } .class2 { color: white; background: green; } #div { height: 50px; width: 130px; color: white; margin: 0 auto; } </style> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <p> Toggle Class in angularJS </p> <div ng-app="app"> <div ng-controller="controller"> <div id='div' ng-class= "{'class1':!val, 'class2': val}"> {{ val }} </div> <a href="javascript:void(0);" ng-click='toggleClass();'> Click to toggle class </a> </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