Манипулировать текстом с разными цветами на основе нескольких условий

Question

Этот код использует модуль angularjs ng-table для отображения значений в таблице.

Соответствующий html-код выглядит следующим образом:

<div ng-controller="ViewCtrl" class="container"> 
    <table ng-table="tableParams" class="table table-bordered"> 
     <thead> 

     <tr>    
      <th>price_alert</th> 
      <th>lastPrice</th> 
     </tr> 

     <thead> 
     <tbody> 
     <tr ng-repeat="item in $data"> 
      <td data-title="'price_alert'" ng-class="{ red: item.lastPrice < stk.price_alert }> 
       ${{item.price_alert}} 
      </td> 
      <td data-title="'lastPrice'" ng-class="{ red: item.lastPrice < stk.price_alert }> 
       ${{item.lastPrice}} 
      </td> 
     </tr> 
     </tbody> 
     </tbody> 
    </table> 
</div> 

Код CSS;

.red { color: red; } 

Код контроллера;

controller('ViewCtrl', ['$scope', '$http', 'moment', 'ngTableParams', 
     function ($scope, $http, $timeout, $window, $configuration, $moment, ngTableParams) { 
      var tableData = []; 
      //Table configuration 
      $scope.tableParams = new ngTableParams({ 
       page: 1, 
       count: 100 
      },{ 
       total:tableData.length, 
       //Returns the data for rendering 
       getData : function($defer,params){ 
        var url = 'http://127.0.0.1/list'; 
        $http.get(url).then(function(response) { 
         tableData = response.data; 
         $defer.resolve(tableData.slice((params.page() - 1) * params.count(), params.page() * params.count())); 
         params.total(tableData.length); 
        }); 
       } 
      }); 
     }]) 

Цвет текста станет красным, если item.lastPrice < item.price_alert. Что делать, если я хочу, чтобы текст окрашивался в красный цвет, когда item.lastPrice < item.price_alert и становился зеленым, когда item.lastPrice > item.price_alert? Можно ли изменить код для обработки нескольких условий? Что-то вроде использования оператора switch?

Answer 1

Создать новый класс CSS:

.red { color: red; } 
.green { color: green; } 

И изменить нг-класс метки в соответствии с:

<td data-title="'price_alert'" ng-class="{ red: item.lastPrice < stk.price_alert, green: item.lastPrice > item.price_alert }> /*....*/