根据角度js更改字体颜色

Question

我正在使用AngularJS，并ng-repeat用于循环并在页面中显示详细信息。

是否可以根据该值更改字体颜色？

<li ng-repeat="s in vm.States" >                        
  <span>{{s.Name}}</span>
  <span>{{s.state}}</span>
 </li>

Test1 -Error(Red)
Test2 - Warning(blue)
Test3 - Ignored(green)

这里的s.state值可以是Error，Warning或Ignored
。我可以通过angular或css为这些状态显示不同的字体颜色吗？

Answer 1

您可以使用以下代码实现此目的：

<li ng-repeat="s in vm.States" >                        
  <span>{{s.Name}}</span>
  <span ng-class="{'color-red': s.state === 'Error', 'color-blue': s.state === 'Warning', 'color-green': s.state === 'Ignored'}">{{s.state}}</span>
</li>

'color-red', 'color-blue', 'color-green'您的CSS类在哪里。

看到它在plunker。

查看有关ng-class的文档。