Question

156

AngularJS: setting background color dynamically

rated 0 times [ 160] [ 4] / answers: 1 / hits: 6150 / 9 Years ago, sun, may 17, 2015, 12:00:00

I have this table showing software logs, which gets populated by JSON data:

<div ng-controller=LogCtrl>

  <table id=logtable style=width:100%>

    <tr>    

        <th>Timestamp</th>

        <th>Severity</th>

        <th>Message</th>

    </tr>

    <tr ng-repeat=log in logs class=logentry>

        <td>{{log.timestamp}}</td>

        <td>{{log.severity}}</td>

        <td>{{log.message}}</td>

    </tr>

</table>

It works fine, but I would like to be able to change each tr element background following its severity. For example, if the severity of that log is ERROR, its entry in the table should have red background, if the severity is MESSAGE, it should be green, etc.

I already took a look at ng-style, but I didn't find out how to use it for this purpose.

Any suggestions?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jazminkyrap

Add To Favorites

Follow

Total Points: 631

Total Questions: 89

Total Answers: 109

Location: Finland

Member since Fri, Oct 21, 2022

2 Years ago

jazminkyrap questions

1 How to fix error: Fontconfig error: Cannot load default config file

Sat, Apr 17, 21, 00:00, 3 Years ago

1 How to return an attribute of clicked element in react?

Sun, Jul 5, 20, 00:00, 4 Years ago

1 why do I got Uncaught TypeError: response.text is not a function error when try to assignt body received as text to a variable in javascript

Sat, May 16, 20, 00:00, 4 Years ago

1 Error This line has a length of 182. Maximum allowed is 100 max-len

Thu, Apr 16, 20, 00:00, 4 Years ago

1 Selecting an html node's text content with htmlparser2 in Node.js

Mon, May 27, 19, 00:00, 5 Years ago

View All

answered 9 Years ago freddiejarretk · Accepted Answer

You can achieve this by ng-class conditional operator

<tr ng-repeat=log in logs class=logentry 

    ng-class={ 'ERROR': 'severity-error', 'MESSAGE': 'severity-message'}[log.severity]>

    <td>{{log.timestamp}}</td>

    <td>{{log.severity}}</td>

    <td>{{log.message}}</td>

</tr>

CSS

.severity-error {

    background-color: red;

}



.severity-message {

    backgroud-color: green;

}