¿Cómo agregar estilos angulares en el pie de página?

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:

Publicación traducida automáticamente

Artículo escrito por thvardhan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *