Para agregar estilos CSS al pie de página o cualquier elemento HTML con angularJS, podemos usar la directiva ng-class si tenemos una clase CSS predefinida, o la directiva ng-style si queremos crear estilos dinámicamente en tiempo de ejecución.
Sintaxis:
<footer ng-style="jsObject">...</footer>
O
<footer ng-class="jsObject/Array/String">...</footer>
En la directiva de estilo ng, jsObject contiene los pares clave-valor de CSS.
En la directiva de clase ng, la expresión puede ser jsObject, Array o String. Aquí jsObject es un mapeo de par clave-valor de un nombre de clase CSS y un booleano, String es solo el nombre de la clase CSS, mientras que Arrays puede ser ambos.
Ejemplo 1: En este ejemplo, usamos la directiva ng-style para agregar estilos al elemento de pie de página.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
</script>
</head>
<body ng-controller="MyController">
<button type="button"
ng-click="click(this)">GFG
</button>
<!-- ng-style to append styles on footer -->
<footer ng-style="styleObj">
<hr>
<h1>GeeksForGeeks!</h1>
</footer>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('MyController', [
'$scope', function($scope) {
$scope.styleObj = {
"color": "green"
}
$scope.click = function($scope) {
// CSS key value pairs to append new
// style of background-color
$scope.styleObj["background-color"] = "green";
// Modifying existing style
$scope.styleObj["color"] = "black";
}
}
]);
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Cuando presionamos el botón GFG, llamará a la función de clic. Luego, la función de clic cambia el valor de styleObj dándole una nueva propiedad y modificando la existente.
Ejemplo 2: En este ejemplo, usamos la directiva ng-class con un objeto para agregar estilos al elemento de pie de página.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<style>
.gfg {
background-color: green;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
</script>
</head>
<body ng-controller="MyController">
<button type="button" ng-click="click(this)">
GFG
</button>
<footer ng-class="clsObj">
<hr>
<h1>GeeksForGeeks!</h1>
</footer>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('MyController', [
'$scope', function($scope) {
$scope.clsObj = {
"gfg": false
}
$scope.click = function($scope) {
$scope.clsObj["gfg"] = true;
}
}
]);
</script>
</body>
</html>
Producción:
- Antes de pulsar el botón:
- Después de presionar el botón:
