Изменить цвет строки таблицы на основе значения столбца

Question

Я получаю данные, используя ng-repeat со статусом столбца. Я хочу изменить цвет строки на основе состояния, то есть, если статус одобрен, цвет строки установленный на зеленый, и если статус отклонен, цвет строки установлен на красный. Может кто-нибудь помочь. Спасибо заранее.

Answer 1

Как правило, рекомендуется включать фрагмент кода в свои вопросы, чтобы мы лучше поняли ваш вопрос. Без этого мы можем делать только дикие догадки, которые, скорее всего, вы не хотите или не подходят для вашего стиля.

Я предполагаю, что ваши данные населен <tr> в ng-repeat

<tr ng-repeat="row in tableData" ng-class="{approved: row.status == 1, rejected: row.status == 0}"> 
    <td>{{row.data1}}</td> 
    <td>{{row.data2}}</td> 
</tr> 

CSS:

tr.approved { background-color: green } 
tr.rejected { background-color: red } 

Выше более правильный способ применения определенного стиля к данным на основе определенного состояния.

Если вы хотите быстро и грязно, как вы можете применить стиль непосредственно, слишком

<tr ng-repeat="row in tableData" ng-style="{'background-color': ((row.status == 1) ? 'green' : (row.status == 0) ? 'red' : '') }"> 
    <td>{{row.data1}}</td> 
    <td>{{row.data2}}</td> 
</tr> 

Answer 2

Вы можете использовать JavaScript/JQuery здесь. Это просто! :) В вашем заголовке тега, включают в себя следующее для вас, чтобы иметь возможность использовать JQuery:

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

затем положить эту функцию внутри другой script тега (просто изменить слово «yourtableid» с идентификатором вашей таблицы после «№»):

 $(document).ready(function(){ 
     $('#yourtableid').find('td:contains("rejected ")').css('background-color','red'); 
     $('#yourtableid').find('td:contains("approved")').css('background-color','green'); 

});