AngularJS ng-class-even指令

AngularJS中的ng-class-even指令是用来指定HTML元素的每个偶数外观的CSS类。它被用来在每个偶数的HTML元素上动态地绑定类。如果_ng-class-even指令中的表达式返回true，那么只有类会被添加，否则就不会被添加。ng-repeat指令是ng-class-even指令发挥作用的必要条件。它被所有的HTML元素所支持。

语法:

<element ng-class-even="expression"> 
    Contents... 
</element>

参数植:

expression：这个参数返回一个以上的类名，或者简单地指定HTML元素的even外观的CSS类。

实例1：本例使用ng-class-even指令来选择偶数元素并应用CSS属性。

<!DOCTYPE html>
<html>
 
<head>
    <title>ng-class-even Directive</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">
    </script>
    <style type="text/css">
        .index {
            color: white;
            background-color: green;
        }
    </style>
</head>
 
<body ng-app="app" style="padding:20px">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>ng-class-even Directive</h3>
    <div ng-controller="geek">
        <table>
            <thead>
                <th>sorting techniques:</th>
                <tr ng-repeat="i in sort">
                    <td ng-class-even="'index'">
                        {{i.name}}
                    </td>
                </tr>
            </thead>
        </table>
    </div>
    <script>
        var app = angular.module("app", []);
        app.controller('geek', ['scope',
        function(scope) {
            $scope.sort = [{
                name: "Merge sort"
            }, {
                name: "Quick sort"
            }, {
                name: "Insertion sort"
            }, {
                name: "Bubble sort"
            }];
        }]);
    </script>
</body>
</html>

输出:

AngularJS ng-class-even指令

实例2：这个例子描述了AngularJS中的**ng-class-even指令，其中偶数元素被选中，以改变其字体大小和文本颜色。

<!DOCTYPE html>
<html>
 
<head>
    <title>ng-class-even Directive</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">
    </script>
 
    <style type="text/css">
        .index {
            color: green;
            font-size: 20px;
        }
 
        ul {
            list-style-type: none;
        }
    </style>
</head>
 
<body ng-app="app" style="padding:20px">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>ng-class-even Directive</h3>
    <div ng-controller="geek">
        <h4>Sorting Techniques:</h4>
        <ul ng-repeat="i in sort">
            <li ng-class-even="'index'">{{i.name}}</li>
        </ul>
    </div>
    <script>
        var app = angular.module("app", []);
        app.controller('geek', ['scope',
            function (scope) {
                $scope.sort = [{
                    name: "Merge sort"
                }, {
                    name: "Quick sort"
                }, {
                    name: "Insertion sort"
                }, {
                    name: "Bubble sort"
                }, {
                    name: "Selection sort"
                }];
            }]);
    </script>
</body>
</html>