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

Question

I need to change the color of the student status on the page, and wanted to do this using the angled, can someone help me how 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;
}

I used the tip given at stackoverflow gringo: https://stackoverflow.com/questions/30243965/change-the-font-color-based-on-value-angular-js but it’s not working.

Answer 1

I found an answer that helped me and adapted my question: https://stackoverflow.com/questions/18172573/angular-ng-class-if-else-expression

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;
} 

Upshot:

Answer 2

You tbm could interpolate the status on ng-class and in your css you define the color instead of making this gigantic conditional in your template.

html <td ng-class="item.status_indicacao"...

and in css td.Ativo { color: green; } td.Cancelado { color: red; }