cambia il colore del carattere in base al valore angolare js

Question

Sto usando angular js e ho usato ng-repeat per eseguire il loop e mostrare i dettagli nella pagina, c'è la possibilità di cambiare il colore del carattere in base al valore?

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

valore qui s.state può essere Errore, Avviso, ignorati Posso mostrare differenti colori per questi stati di font tramite angolare o css

Answer 1

È possibile raggiungere questo obiettivo con seguente codice:

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

Dove 'color-red', 'color-blue', 'color-green' sono le tue classi css.

Vedere in plunker.

Check documentation about ng-class.

Answer 2

Lo si può fare molto facilmente ng-class e css.

codice CSS

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

codice html

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

Answer 3

Vedi questo esempio

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

Potrebbe valere la pena anche taki ng uno sguardo oltre ngStyle, che è la stessa di ngClass ma fornisce condizionale Syling linea come

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