更改样式特定列的
问题描述:
我有一个动态创建一个表的列如下声明:更改样式特定列的
<table>
<tr ng-repeat="row in rows">
<td ng-class="{ 'tdhead' : $index == 0 }"
ng-repeat="col in row.cols">{{col.val}}</td>
</tr>
</table>
在ng-class
依赖于row
变量的例子,它改变了第一的所有TD类行。但我也需要改变特定列中的td类。有没有办法做到这一点?
答
希望这有助于只是在你的ng-class
ng-class="{ 'tdhead' : $index == 0 && $parent.$index == 1 }"
var app = angular.module('plunker', []);
app.controller('MainCtrl',
function MainCtrl($scope) {
$scope.rows = [{
name: "abc1",
empid: 10215,
cols: ["heading1", "heading2", "heading3"]
}, {
name: "abc2",
empid: 10216,
cols: ["heading1", "heading2", "heading3"]
}, {
name: "abc3",
empid: 10217,
cols: ["heading1", "heading2", "heading3"]
}, {
name: "abc4",
empid: 10218,
cols: ["heading1", "heading2", "heading3"]
}, {
name: "abc5",
empid: 10219,
cols: ["heading1", "heading2", "heading3"]
}];
}
);
.tdhead {
background-color: red;
}
<script data-require="[email protected]" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<table ng-app="plunker" ng-controller="MainCtrl">
<tr ng-repeat="row in rows track by $index">
<td ng-class="{ 'tdhead' : $index == 1 && $parent.$index == 3 }" ng-repeat="col in row.cols">{{col}}</td>
</tr>
</table>
添加以下条件在我用4行(指数3)2列(索引1)您可以将代码段甚至使这个值变动 –