web-dev-qa-db-ja.com

値に基づくng-classの適用

シンプルなng-repeatスコアのリストと、正または負の値を表示します。

私がやろうとしていることは、値が負の場合、背景が赤のCSSクラスを表示し、正の場合、緑のCSSクラスを表示することです。ただし、何らかの理由で、ページにred CSSクラスが常に表示されます。

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;
}
angularjsangularjs-directiveangularjs-ng-repeatng-classangular-ng-if
11
Oam Psy

以前に使用された特定の構文を見たことがありません。{true: 'warning', false: 'ok'}[scores.Indicator == 'Negative']の背後にある根拠は何ですか？

ここでngClassを使用する方法は

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

それは動作しますか？

読みやすくするために、コントローラに委任することもできます

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

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

または、ディレクティブを作成することもできます

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