12、AngularJs通过ng-class动态改变样式类实例操作

阅读() @2019-05-12 11:46:36

AngularJs通过ng-class动态改变样式类实例操作,代码如下:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style type="text/css">
		.ng-cloak{display:none;}
		td{height:30px;line-height:30px;padding:0px 10px;}
		.red{background:red;}
		.blue{background:blue;}
	</style>
</head>
<body ng-app="app" ng-controller="ctrl" ng-cloak class="ng-cloak">
	<table cellpadding="0" cellspacing="0" border="1">
		<thead>
			<tr>
				<td>用户ID</td>
				<td>姓名</td>
				<td>年龄</td>
				<td>性别</td>
			</tr>
		</thead>
		<tbody>
			<tr ng-repeat="v in data" ng-class="{'red':v.usex=='男'}" ng-class-even="{'blue':true}">
				<td>{{v.uid}}</td>
				<td>{{v.uname}}</td>
				<td>{{v.uage}}</td>
				<td>{{v.usex}}</td>
			</tr>
		</tbody>
	</table>
</body>
</html>
<script type="text/javascript" src="http://www.zymseo.com/js/angular.min.js"></script>
<script type="text/javascript">
	var m = angular.module('app', []);
	m.controller('ctrl', ['$scope', function($scope){
		$scope.data = [
			{'uid':1, 'uname':'张三', 'uage': 23, 'usex':'男'},
			{'uid':2, 'uname':'李四', 'uage': 24, 'usex':'男'},
			{'uid':3, 'uname':'王五', 'uage': 25, 'usex':'女'},
			{'uid':4, 'uname':'赵六', 'uage': 22, 'usex':'女'}
		];
	}]);
</script>

ng-class="{'类名称':true/false}",如果是true,则应用这个类,如果是false,则不引用这个类!

(完)!

微信二维码