AngularJs通过ng-class动态改变样式类代码实例操作
程序员文章站
2022-07-24 16:50:14
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，则不引用这个类！
（完）！
上一篇： 瞧你吹的这牛搞笑课堂上
下一篇： 苹果充电外壳巨丑 被安卓厂商吐槽惨了