AngularJS中ng-repeat-start动态表格面板头部颜色设置问题

看起来你已经搞定了动态生成表格的核心逻辑，现在就差给不同分类的面板头部加专属颜色了，其实思路很简单，就是给不同分类的面板绑定专属的CSS类，再配合对应的样式规则就行，下面给你两种可行的方案：

方案一：后端/API返回数据时携带样式标识 #

如果可以修改接口返回的数据结构，最直接的方式是给每个分类的数据集加一个专属的样式类字段，比如：

// 假设API返回的数据集结构大概是这样
$scope.tableData = [
  {
    category: '工时表',
    panelClass: 'panel-work-time', // 自定义的样式类
    data: [...] // 工时表数据
  },
  {
    category: '假期表',
    panelClass: 'panel-leave',
    data: [...] // 假期表数据
  },
  {
    category: '费用表',
    panelClass: 'panel-expense',
    data: [...] // 费用表数据
  }
];

然后在HTML的ng-repeat里，把这个类动态绑定到panel容器上：

<div ng-repeat-start="item in tableData" ng-if="item.data.length > 0" class="panel" ng-class="item.panelClass">
  <div class="panel-heading">{{item.category}}</div>
  <!-- 你的表格内容 -->
  <table class="table">...</table>
</div>
<div ng-repeat-end></div>

最后写对应的CSS样式：

/* 工时表头部颜色 - 红色系 */
.panel-work-time>.panel-heading {
  border-color: #dc3545;
  background-color: #dc3545;
  color: #fff; /* 记得加文字颜色，避免看不清 */
}

/* 假期表头部颜色 - 绿色系 */
.panel-leave>.panel-heading {
  border-color: #28a745;
  background-color: #28a745;
  color: #fff;
}

/* 费用表头部颜色 - 橙色系 */
.panel-expense>.panel-heading {
  border-color: #ffc107;
  background-color: #ffc107;
  color: #212529;
}

方案二：前端根据分类名称映射样式类 #

如果没法修改接口返回的数据，也可以在前端做一个分类和样式类的映射表，不用动后端：

首先在控制器里定义映射关系：

$scope.categoryClassMap = {
  '工时表': 'panel-danger', // 用Bootstrap自带的panel类也可以
  '假期表': 'panel-success',
  '费用表': 'panel-warning'
};

// 假设API返回的原始数据是这样的
$scope.tableData = [
  { category: '工时表', data: [...] },
  { category: '假期表', data: [...] },
  { category: '费用表', data: [...] }
];

然后HTML里通过映射表获取对应类：

<div ng-repeat-start="item in tableData" ng-if="item.data.length > 0" class="panel" ng-class="categoryClassMap[item.category]">
  <div class="panel-heading">{{item.category}}</div>
  <table class="table">...</table>
</div>
<div ng-repeat-end></div>

这种方案如果用Bootstrap的内置panel类，甚至可以不用额外写CSS，直接用它自带的panel-danger、panel-success这些类的样式；如果想要自定义颜色，再覆盖对应的CSS就行，比如：

/* 自定义覆盖Bootstrap的panel-danger头部颜色 */
.panel-danger>.panel-heading {
  border-color: #f58705;
  background-color: #f58705;
}

两种方案都能实现你的需求，选哪种看你能不能修改后端数据啦～

内容的提问来源于stack exchange，提问作者AJ-