AngularJS ng-style指令

AngularJS中的ng-style指令是用来在HTML元素上应用自定义的CSS样式。ng-style指令里面的表达式必须是一个对象。它被所有的HTML元素所支持。

语法:

<element ng-style="expression"> 
    Content ... 
</element>

参数：

expression:它表示表达式的返回类型将是一个对象，形式为key: value pair，其中key表示CSS属性，value表示分配给它的相应值。

例子：这个例子说明了AngularJS ng-style指令的基本实现。

<!DOCTYPE html>
<html>
 
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
  <title>AngularJS ng-style Directive</title>
</head>
 
<body ng-app="app" ng-controller="gfgCtrl">
    <h1 ng-style="gfgData">GeeksforGeeks</h1>
    <script>
        var app = angular.module("app", []);
        app.controller("gfgCtrl", function(scope) {
            scope.gfgData = {
                "color": "white",
                "background-color": "green",
                "font-family": "sans-serif",
                "text-align": "center"
            }
        });
    </script>
</body>
</html>

输出:

AngularJS ng-style指令

例子：这个例子通过改变给定输入的样式，说明了_ng-style指令的实现。

<!DOCTYPE html>
<html>
   
<head>
    <title>ng-style Directive</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">
    </script>
    <style type="text/css">
        .bg-color {
            background-color: pink;
            padding: 10px;
            font-size: 18px;
        }
    </style>
</head>
 
<body ng-app="app" style="text-align:center">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2>ng-style Directive</h2>
    <div ng-controller="controllerName">
    Input:
        <input type="text"
               ng-model="color"
               placeholder="Enter any color." />
        <p ng-repeat="i in sort"
           ng-style="{color:color}">
            <span class="bg-color">
                 Name: {{i.name}}
            </span>
        </p>
 
    </div>
    <script>
        var app = angular.module("app", []);
        app.controller('controllerName',
        ['scope', function(scope) {
            $scope.sort = [{
                name: 'Merge sort'
            }, {
                name: 'Quick sort'
            }, {
                name: 'Radix sort'
            }];
        }]);
    </script>
</body>
</html>