更改基於值的字體顏色角度js

Question

我正在使用角度js和我用ng-repeat循環並顯示頁面中的細節，是否有可能根據值更改字體顏色？

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

Test1 -Error(Red) 
Test2-Warning(blue) 
Test 3-Ignored(green) 

這裏s.state值可以是錯誤，警告，忽略 我可以通過角或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。

Check documentation about ng-class.

Answer 2

您可以通過ng-class和CSS這樣做很容易。

CSS代碼

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

HTML代碼

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

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

Answer 4

這可能是值得也塔基納克過目ngStyle這是一樣的ngClass但提供的條件直列syling如

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