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