CSS 根据值 angular js 更改字体颜色

change the font color based on value angular js

提问by user1076698

I am using AngularJS and I use ng-repeatto loop and show the details in the page.

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

Is there a possibility to change the font color based on the value?

是否有可能根据值更改字体颜色？

<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)

Here s.statevalue can be Error, Warning or Ignored
Can I show different font colors for these states via angular or css?

这里的s.state值可以是错误、警告或忽略
我可以通过 angular 或 css 为这些状态显示不同的字体颜色吗？

回答by Ilya Dmitriev

You can achieve this with following code:

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

<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>

Where 'color-red', 'color-blue', 'color-green'are your css classes.

'color-red', 'color-blue', 'color-green'你的 css 类在哪里。

See it in plunker.

在plunker 中看到它。

Check documentation about ng-class.

检查有关 ng-class 的文档。

回答by Dan Moldovan

It might be worth also taking a look over ngStylewhich is the same as ngClassbut provides conditional inline syling such as

也可能值得一看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>

回答by edisonthk

You can do it very easily by ng-classand css.

你可以很容易地通过ng-class和 css来做到这一点。

CSS code

CSS代码

.Error{color: red;}
.Warning{color: blue;}
.Ignored{color: green;}

Html code

html代码

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

回答by jad-panda

See this example

看这个例子

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>