Bootstrap table 条纹:如何仅更改 1 列的条纹背景颜色?
Bootstrap table striped: How do I change the stripe background colour ONLY FOR 1 COLUMN?
我有与 Bootstrap table striped: How do I change the stripe background colour? 类似的问题。但主要区别在于我只想更改一列的颜色交替。
这是我的ng-table,我想更改标题为'Srv'
的第一列的背景颜色
<table ng-table="fondiTable_C" class="table table-condensed table-bordered table-striped" template-pagination="app/components/gestioneFondi/pagerTemplate.html">
<tr ng-repeat="fondo in data_C">
<td class="i9fontPre text-center" data-title="'Srv'" header-class="'i9header'">{{::fondo.area}}</td>
<td class="i9fontPre text-left" data-title="'Chiave IB'" header-class="'i9header'">{{::fondo | formatChiave}}</td>
<td class="i9font text-center" data-title="'Stato Pratica'" header-class="'i9header'">{{::fondo.stato}}</td>
<td class="i9font text-center" data-title="'Flag S/V'" header-class="'i9header'">{{::fondo.fvs}}</td>
<td class="i9font text-right" data-title="'Fondo bucket 1 (EUR)'" header-class="'i9header'">{{::fondo.fnd1 | number:2}}</td>
<td class="i9font text-right" data-title="'Fondo bucket 2 (EUR)'" header-class="'i9header'">{{::fondo.fnd2 | number:2}}</td>
<td class="i9font text-center" data-title="'Bucket'" header-class="'i9header'">{{::fondo.bktDH}}</td>
<td class="i9font text-right" data-title="'Fondo IFRS9 (EUR)'" header-class="'i9header'">{{::fondo.fndDH | number:2}}</td>
<td class="i9font text-center" data-title="'Rapporto'" header-class="'i9header'">{{::fondo | formatRapporto}}</td>
<td class="i9font text-center" data-title="'Cdg'" header-class="'i9header'">{{::fondo.cdg | formatCdg}}</td>
<td class="i9font text-center" data-title="'FT'" header-class="'i9header'">{{::fondo.fTec}}</td>
</tr>
</table>
你能帮帮我吗?
提前谢谢你
您可以使用 ngClass
有条件地将样式应用于特定单元格,ngRepeat
将为每一行重新绘制它。
像这样
<tr ng-repeat="unit in data">
<td ng-class="{'highlight': selected==='name'}">{{unit.name}}</td>
<td ng-class="{'highlight': selected==='model'}">{{unit.model}}</td>
<td ng-class="{'highlight': selected==='price'}">{{unit.price}}</td>
</tr>
根据 selected
的值,td
将由 highlight
class
应用
我有与 Bootstrap table striped: How do I change the stripe background colour? 类似的问题。但主要区别在于我只想更改一列的颜色交替。
这是我的ng-table,我想更改标题为'Srv'
<table ng-table="fondiTable_C" class="table table-condensed table-bordered table-striped" template-pagination="app/components/gestioneFondi/pagerTemplate.html">
<tr ng-repeat="fondo in data_C">
<td class="i9fontPre text-center" data-title="'Srv'" header-class="'i9header'">{{::fondo.area}}</td>
<td class="i9fontPre text-left" data-title="'Chiave IB'" header-class="'i9header'">{{::fondo | formatChiave}}</td>
<td class="i9font text-center" data-title="'Stato Pratica'" header-class="'i9header'">{{::fondo.stato}}</td>
<td class="i9font text-center" data-title="'Flag S/V'" header-class="'i9header'">{{::fondo.fvs}}</td>
<td class="i9font text-right" data-title="'Fondo bucket 1 (EUR)'" header-class="'i9header'">{{::fondo.fnd1 | number:2}}</td>
<td class="i9font text-right" data-title="'Fondo bucket 2 (EUR)'" header-class="'i9header'">{{::fondo.fnd2 | number:2}}</td>
<td class="i9font text-center" data-title="'Bucket'" header-class="'i9header'">{{::fondo.bktDH}}</td>
<td class="i9font text-right" data-title="'Fondo IFRS9 (EUR)'" header-class="'i9header'">{{::fondo.fndDH | number:2}}</td>
<td class="i9font text-center" data-title="'Rapporto'" header-class="'i9header'">{{::fondo | formatRapporto}}</td>
<td class="i9font text-center" data-title="'Cdg'" header-class="'i9header'">{{::fondo.cdg | formatCdg}}</td>
<td class="i9font text-center" data-title="'FT'" header-class="'i9header'">{{::fondo.fTec}}</td>
</tr>
</table>
你能帮帮我吗? 提前谢谢你
您可以使用 ngClass
有条件地将样式应用于特定单元格,ngRepeat
将为每一行重新绘制它。
像这样
<tr ng-repeat="unit in data">
<td ng-class="{'highlight': selected==='name'}">{{unit.name}}</td>
<td ng-class="{'highlight': selected==='model'}">{{unit.model}}</td>
<td ng-class="{'highlight': selected==='price'}">{{unit.price}}</td>
</tr>
根据 selected
的值,td
将由 highlight
class