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

最新推荐文章于 2024-11-27 12:08:42 发布

K'illCode

最新推荐文章于 2024-11-27 12:08:42 发布

阅读量2.6k

点赞数

分类专栏： angularJS 文章标签： angularJs

angularJS 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

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>