应用CSS类
应用CSS类
提问于 2017-08-10 14:30:11
使用ng-repeat指令，我已经使用divs形成了3行2列，像表一样，然后我有2个CSS类，红色和绿色，我想应用这些CSS类，如下所示，
第1行第1列-红色类
第一排第二列-绿色级
第二排第一列-绿色级
第二排第二列-红类
第三行第一列-红色类
第三排第二列-绿色级
明智地说，我需要应用css。
我怎样才能办到这件事？
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-08-10 15:04:08
您可以使用$even、$odd和ng-class来实现这一点。
var app=angular.module('plunker', []);
app.controller('ListCtrl',ListCtrl);
function ListCtrl($scope) {
$scope.items = [
{name: 'foo', value: 'foo value',car:'chevy',model:'vette',year:'2013'},
{name: 'bar', value: 'bar value'},
{name: 'baz', value: 'baz value'}
];
}.red{color:red;}
.green{color:green;}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html ng-app="plunker">
<head>
</head>
<body>
<div ng-controller="ListCtrl">
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td ng-class="{'red':$even,'green':$odd}">{{item.name}}</td>
<td ng-class="{'red':$odd,'green':$even}">{{item.value}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Stack Overflow用户
发布于 2017-08-10 15:28:02
试试这个：
<tbody ng-repeat="data in respdata">
<tr align="left" ng-if="$even">
<td class="red">{{data.id}}</td>
<td class="green">{{data.first_name}}</td>
<td>{{data.last_name}}</td>
<td>{{data.email}}</td>
</tr>
<tr align="left" ng-if="$odd">
<td class="green">{{data.id}}</td>
<td class="red">{{data.first_name}}</td>
<td>{{data.last_name}}</td>
<td>{{data.email}}</td>
</tr>
</tbody>
<style>
.green {
background-color: green;
}
.red {
background-color: red;
}
</style>输出如下：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45616556
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号