频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
AngularJs通过ng-class动态改变样式类代码实例操作
2018-02-13 14:16:39      个评论    来源:KHOST的博客  
收藏   我要投稿

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

(完)!

点击复制链接 与好友分享!回本站首页
上一篇:AngularJs使用ng-model-options设置数据同步时机提高网站性能(代码教程)
下一篇:对react的一些看法和见解(实例)
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站