Question

我有一个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面板标题指定不同的颜色。

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

angularJS，改变ng-repeat开始的类 - 结束

1 个答案: