-2
I have a table that shows the payoffs, how can I leave the red font or the red background if it’s expired? using css
my table is mounted as follows
<table id="myTable" class="uk-table sortable uk-table-hover uk-text-nowrap" cellspacing="0" cellpadding="1" border="0" width="99%">
<thead>
<tr>
<th class="uk-width-1-10 uk-text-center small_col"><input type="checkbox" icheck ng-change="sellall()" ng-model="table1.selectAll" class="check_all" table-check-all></th>
<th style="width: 80px">AÇÕES</th>
<th style="width: 70px">EMISSÃO</th>
<th style="width: 70px">VENCIMENTO</th>
<th style="width: 200px">PESSOA</th>
<th style="width: 80px; text-align:right">VALOR</th>
<th style="width: 80px; text-align:right">PAGO</th>
<th style="width: 80px; text-align:right">SALDO</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Selecionado:<span class="uk-badge uk-badge-notification uk-text-large">{{valSelecionado | currency : ''}}</span></th>
<th>Pago: <span class="uk-badge uk-badge-notification uk-badge-success uk-text-large">{{valJaPago | currency : ''}}</span></th>
<th>Saldo: <span class="uk-badge uk-badge-notification uk-badge-warning uk-text-large">{{valBaixar | currency : ''}}</span></th>
<th></th>
<th style="text-align:right">{{totalSelect | currency: ''}}</th>
<th style="text-align:right">{{totalPago | currency: ''}}</th>
<th style="text-align:right">{{totalSelect - totalPago| currency: ''}}</th>
</tr>
</tfoot>
<tbody>
<!--ng-change="tteste()" ng-checked="tteste()" ng-click="tteste()"-->
<tr ng-repeat="item in registro" on-last-repeat>
<td class="uk-text-center uk-table-middle small_col"><input type="checkbox" icheck ng-model="tabela[$index]" ng-change="addRem($index, tabela, item)" class="check_row" table-check-row></td>
<td style="width: 50px" class="">
<a class="tooltip" title="Deletar" ng-click="delRegistro(item)"><i class="md-icon material-icons uk-text-danger tooltip" title="Deletar"></i></a>
<a ng-click="editRegistro(item)" href="#modalcadastro" data-uk-modal="{ center:true, bgclose:false }"><i class="md-icon material-icons tooltip" title="Editar">mode_edit</i></a>
<a ng-click="setDadosBaixar(item)" href="#modalbaixa" data-uk-modal="{ center:true, bgclose:true }"><i class="md-icon material-icons tooltip" title="Editar">file_download</i></a>
<a ng-click="cleanContaMov(); getContaMov(item)" href="#modalbaixados" data-uk-modal="{ center:true, bgclose:true }"><i class="md-icon material-icons tooltip" title="Visualizar baixas parciais">chrome_reader_mode</i></a>
</td>
<td>{{item.dt_emissao}}</td>
<td>{{item.dt_vencto}}</td>
<td>{{item.PessoaModel.razao | limitTo : 30 : 0}} <a ng-if="item.PessoaModel.razao.length > 30">...</a> </td>
<td style="text-align:right">{{item.valor | currency: ''}}</td>
<td style="text-align:right">{{item.vlr_pago | currency: ''}}</td>
<td style="text-align:right">{{item.saldo | currency: ''}}</td>
</tr>
</tbody>
</table>
*** I have a field that when it’s expired its value is "yes"
The ideal is to apply a style when the table is being mounted, so you don’t have to go through it all later. Is it loaded by ajax? Share with us the relevant code snippets of how the table is created.
– BrTkCa
With html and css no way to check, you need to use javascript. Put the appropriate tags in your question.
– Stéfano
you can’t use
js
??– rLinhares
i use angular, load table using ng-repeat with json coming from backend, could uasr js yes **No axei post edit option
– alessandre martins
class="dt-vencida-color"
existed before Matthew’s answer was given?– Woss
No, I forgot to take, it didn’t work because it doesn’t validate the date
– alessandre martins
You said you have a field that stores whether the date is expired or not. What field is this?
– Woss
yes, it is a field that comes from the back with the value "yes" or "no" for expired, could use it to define the color, just do not know how to use, whether use with ng-show, or ng-if, or by css
– alessandre martins
Use the
ng-class
to add the CSS class if the value of this field is yes.– Woss
@alessandremartins You can add a class to this line?
<td>{{item.dt_vencto}}</td>
. If yes, my answer will validate and work.– Leon Freire
it is yes Leon, I will test, to use the ng-class, I will need to use tb o ng-if ?
– alessandre martins
@alessandremartins The way I made my example, you need to follow only what is there. The use of the
datejs
is important to be able to validate the dates, only.– Leon Freire
@Leonfreire, it didn’t work, I’m using an admin template, if it doesn’t matter the date and jquery doesn’t work, but when I do, it gives a lot of conflict.
– alessandre martins
@alessandremartins Hmmm... From the conflict side, I would have to see how it was installed and what might be conflicting.
– Leon Freire