Question

我刚刚开始使用angularjs并且有一个基本问题。如果我有一个log-level到一个颜色的映射 - 比如ERROR是红色的，WARN是黄色的，DEBUG是绿色的，我想在html中显示json，每个枚举映射到不同的颜色，我将如何实现？

这是我的json输入

var jsonString = [
    { "msg" : "this is warning", "level" : WARN },
    { "msg2" : "this is error", "level" : ERROR }
]

这就是我想要生成的内容

<html>
<table>
<tr><th>Message</th></tr>
<tr><td bgcolor="red">this is error</td></tr>
<tr><td bgcolor="yellow">this is warn<td></tr>
</table>

Answer 1

这是一个建议的解决方案。但是我从来没有听说过bgcolor属性。如果您想使用正确的CSS，可以将其替换为ng-style="{background-color: colors[message.level]}"

angular.module('test', []).controller('test', function($scope) {
  $scope.colors = {
    WARN: 'orange',
    ERROR: 'red'
  };
  
  $scope.messages = [
    { "msg" : "this is warning", "level" : "WARN"},
    { "msg" : "this is error",   "level" : "ERROR" }
  ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
  <body ng-app="test" ng-controller="test">
    <table>
    <tr><th>Message</th></tr>
    <tr ng-repeat="message in messages">
      <td ng-attr-bgcolor="{{colors[message.level]}}">{{message.msg}}</td>
    </tr>
    </table>
  </body>
</html>

或者，正如 Phil 在评论中所建议的那样，您可以使用ng-class="message.level"，然后在.WARN和.ERROR类中添加一些样式。

angular js - 如何将枚举映射到颜色？

1 个答案: