根据值角度js更改字体颜色

Posted 2023-03-06

【中文标题】根据值角度js更改字体颜色

【英文标题】：change the font color based on value angular js

【发布时间】：2015-07-26 11:03:49

【问题描述】：

我正在使用 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 的值可以是错误、警告或忽略 我可以通过 angular 或 css 为这些状态显示不同的字体颜色吗？

【问题讨论】：

检查ng-class或ng-style

【参考方案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。

Check documentation about ng-class.

【讨论】：

这就是我要找的，谢谢

【参考方案2】：

可能还值得一看 ngStyle，它与 ngClass 相同，但提供了条件内联样式，例如

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

【参考方案3】：

看这个例子

var myApp = angular.module('myapp',[]);

myApp
    .controller('MyCtrl1', function ($scope) 
        $scope.vm = 
            States: [
                
                    Name: 'Error',
                    state: 'error',
                    color: 'red'
                ,
                
                    Name: 'Warning',
                    state: 'warning',
                    color: 'blue'
                ,
                
                    Name: 'Ignored',
                    state: 'ignored',
                    color: 'green'
                
            ]
        ;
    )

.red
    color: red;


.blue
    color: blue;   


.green
    color: green;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myapp">
    <div ng-controller="MyCtrl1">
        <li ng-repeat="s in vm.States" >                        
          <span ng-class="s.color">s.Name</span> - 
          <span ng-class="s.color">s.state</span>
         </li>
    </div>
 </div>

【参考方案4】：

您可以通过ng-class 和 css 轻松完成。

CSS 代码

.Errorcolor: red;
.Warningcolor: blue;
.Ignoredcolor: green;

html代码

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