基於值應用ng級

我有一個簡單的ng-repeat，顯示得分列表和肯定或否定值。基於值應用ng級

我想要做的是當值爲負數時，顯示紅色背景CSS類，當正數時顯示綠色CSS類。但是，由於某種原因，我總是在我的頁面上看到紅色 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; 
}

來源

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

來源

2014-05-20 14:32:13 ivarni

理性的背後是解決2回答這裏：HTTP：// stackoverflow.com/questions/15397252/angularjs-toggle-class-using-ng-class使用你的答案，我的行現在都是綠色的（即使是負面的） –

@ivani - 對不起，我有一個語法錯誤，你的解決方案作品。 –

嗯..這是interresting，我想知道你的原始方法是否可以與'「{true：'warning'，false：'ok'} [（scores.Indicator =='Negative'）]'？（例如，包裝邏輯在括號中用方括號測試） – ivarni

基於值應用ng級

回答

相關問題