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

程序员文章站 2022-04-24 13:37:05

AngularJs通过ng-class动态改变样式类实例操作，代码如下： 01 02

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

01	<!doctype html>
02	<html lang="en">
03	<head>
04	    <meta charset="UTF-8" />
05	    <title>Document</title>
06	    <style type="text/css">
07	        .ng-cloak{display:none;}
08	        td{height:30px;line-height:30px;padding:0px 10px;}
09	        .red{background:red;}
10	        .blue{background:blue;}
11	    </style>
12	</head>
13	<body ng-app="app" ng-controller="ctrl" ng-cloak class="ng-cloak">
14	    <table cellpadding="0" cellspacing="0" border="1">
15	        <thead>
16	            <tr>
17	                <td>用户ID</td>
18	                <td>姓名</td>
19	                <td>年龄</td>
20	                <td>性别</td>
21	            </tr>
22	        </thead>
23	        <tbody>
24	            <tr ng-repeat="v in data" ng-class="{'red':v.usex=='男'}" ng-class-even="{'blue':true}">
25	                <td>{{v.uid}}</td>
26	                <td>{{v.uname}}</td>
27	                <td>{{v.uage}}</td>
28	                <td>{{v.usex}}</td>
29	            </tr>
30	        </tbody>
31	    </table>
32	</body>
33	</html>
34	<script type="text/javascript" src="http://www.zymseo.com/js/angular.min.js"></script>
35	<script type="text/javascript">
36	    var m = angular.module('app', []);
37	    m.controller('ctrl', ['$scope', function($scope){
38	        $scope.data = [
39	            {'uid':1, 'uname':'张三', 'uage': 23, 'usex':'男'},
40	            {'uid':2, 'uname':'李四', 'uage': 24, 'usex':'男'},
41	            {'uid':3, 'uname':'王五', 'uage': 25, 'usex':'女'},
42	            {'uid':4, 'uname':'赵六', 'uage': 22, 'usex':'女'}
43	        ];
44	    }]);
45	</script>

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

（完）！

上一篇：迟到被罚幽默笑话一条

下一篇：单手握乾坤最佳小尺寸智能手机盘点