Change HTML table cell background color using Angular JS

Question

I am just beginning using Angular JS in my project.

I have been searching for a way to change the background color from a HTML table cell depending on the value of an Angular JS expression, but haven't found the solution yet.

This is the cell:

<td>{{data.material_or_service}</td>

Any help is welcome

see ng-class which allows you to set a class to a DOM element with condition — anotherdev
– anotherdev, Commented Dec 31, 2015 at 23:50

anotherdev · Accepted Answer · 2016-01-01 00:12:03Z

4

You should use ng-class : https://docs.angularjs.org/api/ng/directive/ngClass

Example:

css:

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

angular view:

<td ng-class="{'red': (variable == 1), 'blue': (variable ==2)}">{{data.material_or_service}</td>

EDIT:

Try that first:

<div ng-class="{'red' : (test != null)}">
  hey !
</div>

<div ng-class="{'red' : (test == null)}">
  hey 2 !
</div>

and set up .red { background-color: red; } in the css. Hey2 is supposed to be in red.

EDIT 2:

Now try with :

<table>
<tr>
<td ng-class="{'red' : (test == null)}">
  hey !
</td>
</tr>
</table>

The <td> is red.

edited Jan 1, 2016 at 0:12

answered Dec 31, 2015 at 23:54

anotherdev

2,5671 gold badge16 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

mvasco Over a year ago

Thank you Pierre, and instead of variable? I am trying as follows: <td ng-class="{red: (material_or_service == 1), blue: (material_or_service ==2)}">{{data.material_or_service}}</td> and nothing changes, only the value for {{data.material_or_service}} is shown

anotherdev Over a year ago

@mvasco: I updated the post to give you an example to insert in the code to allow you to test with <div> . The problem is that I failed, it's 'red' and not red in the ng-class ... (my bad, sorry) . In the js console you should have had an error.

mvasco Over a year ago

But not the line: <td ng-class="{'red': (material_or_service == 1), 'blue': (material_or_service ==2)}">{{data.material_or_service}}</td>

anotherdev Over a year ago

@mvasco: edited to add the 2nd try: it works for a td, so I bet material_or_service has a wrong value. Try to put a {{ material_or_service | json }} before your <table>, to see its value.

mvasco Over a year ago

Checked and the value is "1", as expected.

|

Collectives™ on Stack Overflow

Change HTML table cell background color using Angular JS

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related