2

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正常に動作しますが、重大度に応じて各要素の背景を変更できるようにしたいと考えています。たとえば、そのログの重大度が「ERROR」の場合、テーブル内のそのエントリの背景は赤、重大度が「MESSAGE」の場合は緑などになります。

はすでに見ましたng-styleが、この目的での使用方法がわかりませんでした。

助言がありますか？

4

2 に答える 2

3

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;
}
于 2015-05-17T15:50:26.293 に答える