当前位置：慕源网 > AngularJS ng-class-even指令详解及示例

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

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

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

常见问题FAQ

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

慕源网 普通

分享到：

发表评论

相关推荐

开通VIP 享更多特权，建议使用QQ登录
账号登录/注册
QQ登录
微博登录