欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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,则不引用这个类!

(完)!