web-dev-qa-db-fra.com

Angular: Comment changer la couleur de la table de cellules si la condition est vraie

J'ai un objet qui a une variable appelée changeColor. Dans mon tableau html, je souhaite modifier la couleur de la cellule si changeColor est vrai. J'utilise angulaire.

    <tr ng-repeat="list in results">
    <% if (!{{list.changeColor}} ) %>
    <% { %>
        <td bgcolor="red">{{list.value}}</td>
    <% } %>
    <td>{{list.price}}</td>

Mais après les tests, il est toujours rouge et la <% if (! ) %> <% { %> <% } %> est écrite dans ma page html! Pouvez-vous m'aider s'il vous plaît?

Testé cette 

<td style=".red {bgcolor: red;} .black {bgcolor: black;}"
 ng-class='{red : list.changeColor, black: !list.changeColor}'>
 {{list.price}}</td>

Mais ça ne marche pas

htmlangularjshtml-tablebackground-color
7
Sara

Vous devez utiliser ng-class

<tr ng-repeat="list in results">
    <td ng-class='{red : list.changeColor, black: !list.changeColor}'>{{list.value}}</td>
    <td>{{list.price}}</td>
</tr>

CSS

<style type="text/css">
.red {
    color: red; 
}

.black {
    color: black;
}
</style>
25
Fizer Khan

Ne mettez pas tant de logique dans vos vues. Essayez ceci à la place:

Directive ngClass

Cela vous permettra de changer la classe td en fonction d'une expression.

6
crunch
 <td ng-class="{'negative':daily.MTDCompSales<0,'positive':daily.MTDCompSales>0}">{{daily.MTDCompSales | number:0}}</td>

Cette ligne de code change en fonction de la valeur des données, si les données sont positives ou négatives.

0
rabyusbeef