AngularJS如何使用ng-class-odd指令（代码示例）

ng-class-odd指令在AngularJS中, 用于在HTML元素的每一种奇怪外观上指定CSS类。它用于在每个奇数HTML元素上动态绑定类。如果ng-class-odd指令中的表达式返回true, 则仅添加该类, 否则不添加。要使ng-class-odd指令起作用, 必须使用ng-repeat指令。所有HTML元素都支持它。
语法如下：

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

例子：本示例使用ng-class-odd指令选择奇数元素并添加一些CSS样式。

< !DOCTYPE html> < html > < head > < title > ng-class-odd 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" > lsbin< / h1 > < h2 > ng-class-odd Directive< / h2 > < div ng-controller = "geek" > < table > < thead > < th > sorting techniques:< / th > < tr ng-repeat = "i in sort" > < td ng-class-odd = "'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-odd指令（代码示例）】输出如下：