AngularJS：动态设置背景颜色

Question

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?

Answer 1

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

Answer 2

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.org/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>