AngularJS：动态设置背景颜色

Posted 2023-03-06

【中文标题】AngularJS：动态设置背景颜色

【英文标题】：AngularJS: setting background color dynamically

【发布时间】：2015-07-29 02:05:49

【问题描述】：

我有这张表显示软件日志，它由 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，但我不知道如何将其用于此目的。

有什么建议吗？

【参考方案1】：

同上，但使用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>

【参考方案2】：

您可以通过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;

【讨论】：

为了更简洁，一个接受日志严重性并切换类的指令将是一个很好的设计决策。