Applicazione di classe ng in base al valore

Question

Ho un semplice ng-repeat che visualizza un elenco di punteggi e un valore di Positivo o Negativo.

Quello che sto cercando di fare è quando il valore è Negativo, visualizzare una classe CSS in background rossa e, quando Positivo, visualizzare una classe CSS verde. Tuttavia, per qualche ragione, vedo sempre la classe red CSS sulla mia pagina.

HTML:

<tr ng-repeat="scores in Test" ng-class="{true: 'warning', false: 'ok'}[scores.Indicator == 'Negative']">      
    <td>Overall: {{ scores.Indicator }}</td> 
</tr> 

CSS:

.warning { 
    background: red; 
} 

.ok { 
    background: green; 
} 

Answer 1

Non ho visto quel particolare sintassi usata prima, qual è la logica dietro {true: 'warning', false: 'ok'}[scores.Indicator == 'Negative']?

Il modo in cui avrei usato ngClass qui è

<tr ng-repeat="scores in Test" ng-class="{warning: (scores.Indicator == 'Negative'), ok: (scores.Indicator != 'Negative')}"> 

funziona?

Per una migliore leggibilità si potrebbe delegare al controller così

<tr ng-repeat="scores in Test" ng-class="scoreClass(scores)"> 

$scope.scoreClass = function(scores) { 
    return scores.Indicator == 'Negative' ? 'warning': 'ok'; 
} 

Oppure si potrebbe creare una direttiva

<tr ng-repeat="scores in Test" score-class scores="scores"> 

.directive('scoreClass', [function() { 

    return { 
     restrict: 'A', 
     scope: { 
      scores: '=', 
     }, 
     link: function(scope, element, attrs, controller) { 
      scope.$watch('scores', function() { 
       element.removeClass('ok'); 
       element.removeClass('warning'); 
       if (scope.scores.Indicator == 'Negative') { 
        element.addClass('warning'); 
       } else { 
        element.addClass('ok'); 
       } 
      }, true); 
     } 
    }; 
}]);