else - ng-class angularjs ejemplos

Aplicando ng-class basado en el valor

Question

Tengo una simple ng-repeat que muestra una lista de puntajes y un valor de Positivo o Negativo.

Lo que intento hacer es cuando el valor sea Negativo, muestre una clase CSS de fondo roja, y cuando sea Positivo, muestre una clase CSS verde. Sin embargo, por alguna razón, siempre veo la clase de CSS roja en mi página.

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

No he visto esa sintaxis particular antes, ¿cuál es la razón detrás de {true: ''warning'', false: ''ok''}[scores.Indicator == ''Negative''] ?

La forma en que usaría ngClass aquí es

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

¿Eso funciona?

Para una mejor legibilidad también podrías delegarlo en el controlador

<tr ng-repeat="scores in Test" ng-class="scoreClass(scores)">
$scope.scoreClass = function(scores) {
return scores.Indicator == ''Negative'' ? ''warning'': ''ok'';
}

O podrías crear una directiva

<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);
}
};
}]);