how do I change the color of an html element based on its value using angle 1.6.4

Question

how do I change the color of an html element based on its value using angle 1.6.4

Navigation

#1 by (0 votes)

0

I need to change the color of the student's status on the page, and I wanted to do this using the angle, can someone help me how do I do this using the value of the element?

HTML:

 <tbody>
    <tr ng-repeat="item in filtered = (filterList | filter: {cod_bolsa : clientSearch || undefined}: true) | start: (currentPage - 1) * maxPerPage | limitTo: maxPerPage">

        <td>{{item.nome_aluno | uppercase }}</td>
        <td ng-class="{'green': item.status_aluno == 'Ativo' , 'red': item.status_aluno == 'Cancelado' , 'orange': item.status_aluno == 'Substituído'}">{{item.status_aluno}}</td>
        <td>{{item.nome_orientador}}</td>
        <td>{{item.nome_coorientador}}</td>
        <td>{{item.departamento}}</td>
        <td>{{item.numero_edital}}</td>
        <td>{{item.tipo_bolsa | uppercase }}</td>
    </tr>
 </tbody>

CSS:

.red{
       color: red;
    }
.green {
    color: green;
}
.orange{
    color: orange;
}

Iusedthehintgiveninthegringostackoverflow: link but it is not working.

front-end angular

asked by anonymous 05.03.2018 / 12:12

1 answer

Eslint Installation E-mail sending .php does not redirect page

score 0 · Answer 1

I found an answer that helped me and adapted my question: link

HTML:

  <table class="table table-striped table-condensed table-hover table-responsive" style="width:100%;" id="lista_bolsas">
                                            <thead>
                                            <tr>

                                                <th class="nome_aluno" custom-sort order="'nome_aluno'" sort="sort">Nome do Aluno</th>
                                                <th class="status_indicacao" custom-sort order="'status_indicacao'" sort="sort">Status</th>
                                                <th class="ano_projeto" custom-sort order="'ano_projeto'" sort="sort">Ano vigência inicial</th>
                                                <th class="ano_projeto" custom-sort order="'ano_projeto'" sort="sort">Ano vigência final</th>
                                                <th class="departamento" custom-sort order="'departamento'" sort="sort">Departamento&nbsp;</th>
                                                <th class="professor" custom-sort order="'professor'" sort="sort">Professor Orientador</th>
                                                <th class="tipo_bolsa" custom-sort order="'tipo_bolsa'" sort="sort">Tipo da bolsa</th>
                                                <th>Detalhes</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr ng-repeat="item in filtered = (filterList | filter: {cod_bolsa : clientSearch || undefined}: true) | start: (currentPage - 1) * maxPerPage | limitTo: maxPerPage">

                                                <td>{{item.nome_aluno | uppercase }}</td>
                                                <td ng-class="{'green':item.status_indicacao=='Ativo','red': item.status_indicacao=='Cancelado','orange': item.status_indicacao=='Substituído'}" >{{item.status_indicacao}}</td>
                                                <td>{{item.ano_vigencia_inicial}}</td>
                                                <td>{{item.ano_vigencia_final}}</td>
                                                <td>{{item.departamento}}</td>
                                                <td>{{item.orientador}}</td>
                                                <td>{{item.tipo_bolsa | uppercase }}</td>
                                                <td style=" width:1%;  white-space:nowrap;">
                                                    <a type='button'
                                                       class='btn btn-default'
                                                       title="Detalhes da nota"
                                                       href="#!secretaria/bolsa/relatorio/projetos_por_ano/detalhes/{{item.cod_bolsa}}"
                                                       target="_blank">
                                                        <span class='glyphicon glyphicon-eye-open' aria-hidden='true'></span>
                                                    </a>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>

CSS:

.green {
    color: green;
}

.red{
    color: red;
}

.orange{
    color: orange;
}

Result: