1


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&nbsp;1 (EUR)'" header-class="'i9header'">{{::fondo.fnd1 | number:2}}</td>
                    <td class="i9font text-right" data-title="'Fondo bucket&nbsp;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

Raul
  • 115
  • 5
  • 16
  • If you have the option just add a class the the specific tag, or simply target it with :nth-child(n), provide an example then i can give a more specific answer – mheonyae Mar 06 '18 at 14:57
  • I edited the post, thank you – Raul Mar 06 '18 at 15:05

1 Answers1

1

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

svarog
  • 9,477
  • 4
  • 61
  • 77