AngularJS ng-class-even指令详解及示例

作者 : 慕源网 本文共982个字,预计阅读时间需要3分钟 发布时间: 2022-05-3 共182人阅读

AngularJS ng-class-even指令,AngularJS 中的ng-class-even 指令用于为 HTML 元素动态的绑定一个或多个 CSS 类,但只作用于偶数行。如果 ng-class-even 指令中的表达式返回 true,则添加class,否则不添加。ng-class-even 指令需要与 ng-repeat 指令搭配使用。所有 HTML 元素都支持它。

语法:

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

示例:使用 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>
	<h2>ng-class-even Directive</h2>

	<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指令详解及示例


慕源网 » AngularJS ng-class-even指令详解及示例

常见问题FAQ

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录