AngularJS: динамическая настройка цвета фона

Question

У меня есть эта таблица, показывающая журналы программного обеспечения, которые заполняются данными JSON:

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

Работает нормально, но хотелось бы поменять каждый tr фон элемента в зависимости от его серьезности. Например, если серьезность этого журнала - "ОШИБКА", его запись в таблице должна иметь красный фон, если серьезность - "СООБЩЕНИЕ", он должен быть зеленым и т. Д.

Я уже взглянул на ng-style, но я не выяснил, как использовать это для этой цели.

Какие-либо предложения?

Answer 1

Вы можете достичь этого путем ng-class условный оператор

<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

То же, что и выше, но с 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>