Search code examples
htmlangularjshtml-tablebackground-color

Angular: How to change the color of cell table if condition is true


I have an object which has a variable called changeColor. In my html table I want to change the cell color if changeColor is true. I am using angular.

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

But after testing it is always red and the <% if (! ) %> <% { %> <% } %> is written in my html page! Can you please help me?

Tested this

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

But it does not work


Solution

  • You have to use 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>