AngularJS ng-class指令详解及示例

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

AngularJS ng-class指令AngularJS 中的ng-class 指令用于指定 HTML 元素上的 CSS 类。它用于在 HTML 元素上动态绑定类。如果 ng-class 指令中的表达式返回 true,则只添加类,否则不添加。所有 HTML 元素都支持它。

语法:

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

示例 1:使用 ng-class 指令设置和重置 CSS 类。

<!DOCTYPE html>
<html>
	
<head>
	<title>ng-class Directive</title>
	
	<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">
	</script>

	<style>
		.edit {
			color: green;
			font-size: 1.5em;
		}
	</style>
</head>

<body ng-app="" style="text-align:center">
	
	<h1 style="color:green">GeeksforGeeks</h1>
	<h2>ng-class Directive</h2>

	<div>
		<input type="button" ng-click="edit=true" value="Style" />
		<input type="button" ng-click="edit=false" value="Reset" />
		
		<br><br>
		
		<span ng-class="{true:'edit'}[edit]">
			GeeksforGeeks
		</span>
		is the computer science portal for geeks.
	</div>
</body>

</html>					

输出:

单击按钮之前:

AngularJS ng-class指令详解及示例

单击样式按钮后:

AngularJS ng-class指令详解及示例

示例 2:使用 ng-class 指令设置类的 CSS 样式。

<!DOCTYPE html>
<html>
	
<head>
	<title>ng-class 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 Directive</h2>

	<div ng-controller="geek">
		<table>
			<thead>
				<th>Select any sorting technique:</th>
				<tr ng-repeat="i in sort">
					<td ng-class="{index:$index==row}"
							ng-click="sel($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: "Bubble sort" }
			];
			$scope.sel = function (index) {
				$scope.row = index;
			};
		}]);
	</script>
</body>

</html>					

输出:

在选择元素之前:

AngularJS ng-class指令详解及示例

选择元素后:

AngularJS ng-class指令详解及示例

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

常见问题FAQ

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

发表评论

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