根据值应用 ng-class
我有一个简单的 ng-repeat，它显示一个分数列表和一个正值或负值.
I have a simple ng-repeat that displays a list of scores and a value of either Positive or Negative.
我想要做的是当值为 Negative 时，显示红色背景 CSS 类，当值为 Positive 时，显示绿色 CSS 类.但是，出于某种原因，我总是在我的页面上看到 red CSS 类.
What i am trying to do is when the value is Negative, display a red background CSS class, and when Positive, display a green CSS class. However, for some reason, i am always seeing the red CSS class on my page.
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;
}
我以前没见过使用过这种特殊语法，{true: 'warning', false: 'ok'}[scores.Indicator == 'Negative']?
I haven't seen that particular syntax used before, what's the rationale behind {true: 'warning', false: 'ok'}[scores.Indicator == 'Negative']?
我在这里使用 ngClass 的方式是
The way I would use ngClass here is
<tr ng-repeat="scores in Test" ng-class="{warning: (scores.Indicator == 'Negative'), ok: (scores.Indicator != 'Negative')}">
那行得通吗?
为了更好的可读性，您也可以将其委托给控制器
For better readability you could delegate it to the controller as well
<tr ng-repeat="scores in Test" ng-class="scoreClass(scores)">
$scope.scoreClass = function(scores) {
return scores.Indicator == 'Negative' ? 'warning': 'ok';
}
或者你可以创建一个指令
Or you could create a directive
<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);
}
};
}]);