Bootstrap table striped：如何更改条形背景色仅适用于1列？(Bootstrap table striped: How do I change the stripe background colour ONLY FOR 1 COLUMN?)
我有类似的问题Bootstrap表条纹：我如何更改条纹背景颜色？ 。 但主要的区别是我想只改变一列的颜色交替。 这是我的ng表的副作用，我想改变标题'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>你可以帮帮我吗？ 先谢谢你
I have similar question to Bootstrap table striped: How do I change the stripe background colour?. But the main difference is that I would like to change the alternation of colors only for one column. This is the cose of my ng-table, I would like to change the background colour of the first column with title '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>Could you help me? Thank you in advance
最满意答案
您可以使用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类应用
这是一个演示
You can use ngClass to conditionally apply style to a specific cell, ngRepeat will repaint it for every row.
Something like this
<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>depending on the value of selected, a td will be applied by the highlight class
Here's a demo
更多推荐
发布评论