javascript - AngularJS: setting background color dynamically - Stack Overflow

admin管理员组

文章数量:1406344

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?

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?

• javascript
• html
• css
• angularjs
• ng-style

Share Improve this question Follow edited May 17, 2015 at 16:06 prtnkl asked May 17, 2015 at 15:20 prtnklprtnkl 30211 gold badge44 silver badges1212 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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;
}

Same as above, but with ng-style.

<tr ng-repeat="log in logs"
    ng-style="{'ERROR':{background:'red'}, 'INFO':{background: 'green'}}[log.severity]">
    <td>{{log.timestamp}}</td>
    <td>{{log.severity}}</td>
    <td>{{log.message}}</td>
</tr>

var app = angular.module('app', []);

app.controller('tableController', function($scope) {
  $scope.logs = [
    {
               timestamp: 'foo',
               severity: 'ERROR',
               message: 'Something bad happened'
    },
    {
               timestamp: 'bar',
               severity: 'INFO',
               message: 'This is ok'
    },
  ];
});

<script src="https://code.angularjs/1.4.0-rc.2/angular.js"></script>

<table ng-controller="tableController" ng-app="app">
 <tr ng-repeat="log in logs"
     ng-style="{'ERROR':{background:'red'}, 'INFO':{background: 'green'}}[log.severity]">
   <td>{{log.timestamp}}</td>
   <td>{{log.severity}}</td>
   <td>{{log.message}}</td>
 </tr>
</table>

本文标签： javascriptAngularJS setting background color dynamicallyStack Overflow