我有一个ng-repeat-start继续根据我们从数据库/ api获得的数据创建所需数量的表,因此一个表可能是工作时间,一个费用,一个假期,并且它们是基于是否创建而创建的是该类别中的数据(没有休假?假期表不会被创建)。
现在一切正常,做了一些调整,每个表应该有不同的标题颜色(让我们说工作时间是红色,假期是绿色等等)。
我无法弄清楚如何更改包含每个不同表的表的面板的标题颜色。
.WorkTable .panel-warning>.panel-heading {
border-color: #f58705;
background-color: #f58705;
}
这是为标题赋予特定颜色的css代码,为每个生成的表更改颜色的最佳方法是什么?
我不知道将生成多少个表,这取决于用户,但我知道可能有最多10个表,我想为它们中的每一个定义一个颜色,以防它们生成。
希望问题很明确,我不知道还有什么我可以代码共享,因为代码的其余部分是无关紧要的,因为我需要知道,一般来说,如何为不同的类提供生成的元素一个ng-repeat,我不能使用索引,因为我不知道将生成什么以及有多少元素
编辑:填充表的数据有一个id值,因此控制器知道每个ID需要一个单独的表,因此它不会将数据库中的所有数据放在同一个表中,而是为每个不同的ID创建一个,这也是我如何在一些表格和其他表格中显示内容,使用:
ng-show="t.tableID == 0"
在这种情况下,只有ID = 0的表格才会显示,我可以使用相同的颜色吗?在每个ID上分配一种不同的颜色?
编辑以获得更多说明:
在控制器中,我将数据库中的所有数据映射到API,并将其映射到包含以下信息的数组中:
return r.data.reduce((prev, current, i, all) => {
if (!prev.some(t => t.tableID === current.tableID)) {
const presencesForThisTableID = all.filter(p => p.tableID === current.tableID);
let newTableOverview: Interfaces.TableOverview = {
tableID: current.tableID,
tableID_description: current.tableID_description,
presences: presencesForThisTableID.map(this.mapperService.mapApiMessageToTablePresence)
所以这是控制器的一部分,我从中获取数据库中的所有数据,并减少所有信息的3个类别,ID,描述以及每个表的所有子数据,这样做我就可以了看看会有多少个不同的表,并为每个不同的ID生成一个,然后在第一个中使用第二个ng-repeat,我将使用“vm.presences.xxxx”填充访问数据的表。
htm代码是这样的:
<div class="row topMargin-10" ng-repeat-start="t in vm.TableOverview">
<div class="panel-body noPadding">
<table id="tableStyle" class="table table-bordered table-striped">
<tbody>
<tr ng-repeat="p in t.presences">
<td>{{p.month}}</td>
<td>{{p.day1}}</td>
<td>{{p.day2}}</td>
<td>{{p.day3}}</td>
<td>{{p.day4}}</td>
<td>{{p.day5}}</td>
等等,所以你明白了,正如你所看到的,X面板将根据我从数据库中获得多少不同的TableID生成,每个表将填充另一个ng-repeat,现在我想分配一个生成的EACH面板标题的颜色不同。
<div ng-repeat="table in tables">
<div ng-class="table.class">
<!-- define your content here -->
</div>
</div>
在js和css中,您可以根据需要定义任意数量的类
js例子:
$scope.tables =
[
{'name':'sea', 'class':'blueStyle', 'rows':4, ..},
{'name':'mountain', 'class':'brownStyle', 'rows':3, ...}
];
css例子:
.blueStyle
{ color: blue};
.brownStyle
{ color: brown};
编辑:
在你的情况下:
var colors: ['blue','white','red','black'...]
let newTableOverview: Interfaces.TableOverview = {
tableID: current.tableID,
tableID_description: current.tableID_description,
tableID_class:colors[tableID],
CSS:
.white
{
background-color: white
}
.red
{
background-color: red
}
HTML:
<table id="tableStyle" class="table table-bordered table-striped">
<th ng-class="t.tableID_class" >This is the table header</th>
<tbody>
<tr ng-repeat="p in t.presences">
<td>{{p.month}}</td>
我想你想从之前声明的简单js数组中获取颜色。但是你可以从任何你想要的地方拿走它。