一个例子
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" ng-app="myapp"><head><title>class</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="JS/angular.min.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="JS/angular-route.min.js"></script>
<script>
var app = angular.module('myapp', []);
app.controller('ColorController', function ($scope) {
$scope.users = [{ id: 1, name: 'wolfy', age: 20 }, { id: 2, name: 'wolfy2', age: 20 }, { id: 3, name: 'wolfy3', age: 20 }];
}); </script>
<style>
.main {
border: 1px solid #0094ff;
width: 100%;
}
.list {
margin: 8px auto;
width: 90%;
text-align: center;
}
.even {
background-color: lightgray;
}
.odd {
background-color: lightgreen;
}
</style></head><body>
<div ng-class="'main'" ng-controller="ColorController">
<h2>示例一</h2>
<table ng-class="'list'" border="1" cellpadding="0" cellspacing="0">
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr ng-repeat="user in users" ng-class-even="'even'" ng-class-odd="'odd'" >
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
</tr>
</table>
<h2>示例二</h2>
<table ng-class="'list'" border="1" cellpadding="0" cellspacing="0">
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr ng-repeat="user in users" ng-class="($index+1)%2==0?'even':'odd'">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
</tr>
</table>
</div></body></html>
总结
这里需要注意在使用ng-class,ng-class-even,ng-class-odd时，需为类样式加上单引号，不然不起作用。
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí)，寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃，即可進(jìn)行掃碼打賞哦