如何在页脚中追加Angular样式？

要将CSS样式附加到footer或任何带有angularJS的HTML元素中，如果我们有预定义的CSS类，则可以使用ng-class指令，如果要在运行时动态创建样式，则可以使用ng-style指令。

句法：

...

或者

...

在ng-style指令中，jsObject包含CSS键值对。
在ng-class指令中，表达式可以是jsObject，Array或String。此处的jsObject是CSS类名称和布尔值的键-值对映射，String只是CSS类的名称，而Arrays可以是两者。

示例1：在此示例中，我们使用ng-style指令将样式附加到页脚元素。

      

    
    

  

    GFG
    
  
    
    
        
        GeeksForGeeks!
    
      
    
        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";
                }
            }
        ]);
    

  

输出：

• 在单击按钮之前：
  
• 单击按钮后：
  

当我们按下GFG按钮时，它将调用click函数。然后，单击函数通过为styleObj赋予一个新属性并修改现有属性来更改其值。

示例2：在此示例中，我们将ng-class指令与对象一起使用，以将样式附加到页脚元素中。

  

    
        .gfg {
            background-color: green;
        }
    
  
    
    

  

    
        GFG
    
  
    
        
        GeeksForGeeks!
    
  
    
        var myApp = angular.module('myApp', []);
      
        myApp.controller('MyController', [
            '$scope', function($scope) {
                $scope.clsObj = {
                    "gfg": false
                }
      
                $scope.click = function($scope) {
                    $scope.clsObj["gfg"] = true;
                }
            }
        ]);
    

  

输出：

• 按下按钮之前：
  
• 按下按钮后：