Change table background dynamically angularjs

Question

How can I change the background of a table cell dynamically in HTML using AngularJS ?

In the following code I want to show a table with a bunch of names and the including status of an object. The status can weather be VALID (green background) or INVALID (red background).

Can this problem be solved in my <td> HTML tag or do I have to move on to CSS ?

<table border="1">
   <tr ng-repeat="object in Cmd.items">
      <td>{{object.objectName}}</td>
      <td>{{object.objectStatus}}</td> //this background should be colored
   </tr>
</table>

Omri Aharon · Accepted Answer · 2016-02-15 12:48:22Z

2

You can do this using ng-class:

<tr ng-repeat="object in Cmd.items">
      <td>{{object.objectName}}</td>
      <td ng-class="{'red': object.objectStatus === 'invalid', 'green': object.objectStatus === 'valid'}">{{object.objectStatus}}</td> 
</tr>

Fiddle

answered Feb 15, 2016 at 12:48

Omri Aharon

17.1k5 gold badges43 silver badges61 bronze badges

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

Comments

oto lolua · Accepted Answer · 2016-02-15 12:47:54Z

1

you can use ng-class

e.x. :

<div ng-class={'green-bg':isValid, 'red-bg':!isValid}> </div>

green-bg and red-bg are css classes and isValid is property, where you know expression isValid or no

answered Feb 15, 2016 at 12:47

oto lolua

5094 silver badges17 bronze badges

Comments

Alexis · Accepted Answer · 2016-02-15 12:49:46Z

1

CSS :

.invalid{
background-color:red;
}

.valid{
background-color:green;
}

HTML

<table border="1">
   <tr ng-repeat="object in Cmd.items">
      <td>{{object.objectName}}</td>
      <td ng-class="object.objectStatus">{{object.objectStatus}}</td> //this background should be colored
   </tr>
</table>

answered Feb 15, 2016 at 12:49

Alexis

5,8211 gold badge30 silver badges46 bronze badges

Comments

oseintow · Accepted Answer · 2016-02-15 13:06:46Z

0

It can be solved both in the td tag or/and in your external css.

In Html

     <td ng-style="{'background': (object.objectStatus=='VALID') ? 'green' : 'red'}">
        {{object.objectStatus}}
      </td>

With external css You can use @oto lolua implementation

answered Feb 15, 2016 at 13:06

oseintow

7,4213 gold badges28 silver badges31 bronze badges

Collectives™ on Stack Overflow

Change table background dynamically angularjs

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related