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