Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 722
Sara Avatar asked Feb 23 '14 05:02

Sara


People also ask

Can we set a background color just for one cell in a table?

In HTML, table background color is defined using Cascading Style Sheets (CSS). Specifically, you use the background-color property to define background color. You can apply this property against the whole table, a row, or a single cell.

How do I put the background color in a specific cell in a table?

Cell background colors are set by applying the bgcolor attribute to a <tr> tag (to color the row) or to a <td> tag (to color the cell). Cell colors override row colors which, in turn, override table background colors.

What attribute could you use to define the color of a cell in a table?

The HTML <td> bgcolor attribute is used to specify the background color of a table cell.

Which Property change the colors of table cell in HTML?

The HTML <table> bgcolor Attribute is use to specify the background color of a table. Attribute Values: color_name: It sets the text color by using the color name.


1 Answers

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>
like image 198
Fizer Khan Avatar answered Oct 06 '22 03:10

Fizer Khan