angularJS，在ng-repeat开始 - 结束中更改类

Question

我得到了一个ng-repeat-start，根据我们从数据库/api获得的数据，根据需要创建任意数量的表，因此一个表可能是工作时间，一个费用，一个假期，并且它们是根据该类别中是否有数据创建的(没有假期？假期表不会被创建)。

现在一切正常，需要做一些调整，每个表应该有不同的标题颜色(假设工作时间是红色，假期是绿色等等)。

我不知道如何更改包含每个不同表的表的面板的标题颜色。

.WorkTable .panel-warning>.panel-heading {
border-color: #f58705;
background-color: #f58705;
}

这是为标题提供特定颜色的 CSS 代码，更改生成的每个表的颜色的最佳方法是什么？

我无法知道将生成多少个表，这取决于用户，但我知道最多可能有 10 个表，我想为每个表定义一种颜色，以防它们被生成。

希望问题清楚，我不知道我还可以在代码方面共享什么，因为其余代码无关紧要，因为我需要知道，一般来说，你如何为使用 ng-repeat 生成的元素提供不同的类，我不能使用 index，因为我不知道会生成什么以及有多少元素

编辑：填充表的数据具有 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 生成一个，然后在第一个 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，现在我想为每个生成的面板标题分配不同的颜色。

Answer 1

<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 数组中获取颜色。但是你可以从任何你想要的地方拿走它。