极客教程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>
输出:
实例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>
输出:
