изменить цвет шрифта на основе значения угловой 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>