изменение цвета шрифта на основе значения angular js

Я использую AngularJS, и я использую ng-repeat to loop и показать детали на странице.

есть ли возможность изменить цвет шрифта в зависимости от значения?

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

9
angularjs css css3

4 ответов

вы можете достичь этого со следующим кодом:

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

проверьте документацию о ng-class.

17

возможно, стоит также взглянуть на 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>
6

вы можете сделать это очень легко с помощью 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>
4

посмотреть этот пример 

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