angularjs – 根据值应用ng-class

我有一个简单的ng-repeat,它显示一个得分列表和一个正面或负面的值.

我想要做的是当值为Negative时,显示红色背景CSS类,当为Positive时,显示绿色CSS类.但是,出于某种原因,我总是在页面上看到红色的CSS类.

HTML：

<tr ng-repeat="@R_301_182@s in Test" ng-class="{true: 'warning',false: 'ok'}[@R_301_182@s.Indicator == 'Negative']">                       
     <td>Overall: {{ @R_301_182@s.Indicator }}</td>
</tr>

CSS：

.warning {
    background: red;
}

.ok {
    background: green;
}

我还没有看到之前使用的特定语法,{true：’warning’,false：’ok’} [@R_301_182@s.Indicator ==’Negative’]背后的理由是什么？

我在这里使用ngClass的方式是

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

那样有用吗？

为了更好的可读性,您也可以将其委托给控制器

<tr ng-repeat="@R_301_182@s in Test" ng-class="@R_301_182@Class(@R_301_182@s)">

$scope.@R_301_182@Class = function(@R_301_182@s) {
    return @R_301_182@s.Indicator == 'Negative' ? 'warning': 'ok';
}

或者你可以创建一个指令

<tr ng-repeat="@R_301_182@s in Test" @R_301_182@-class @R_301_182@s="@R_301_182@s">

.directive('@R_301_182@Class',[function() {

    return {
        restrict: 'A',scope: {
            @R_301_182@s: '=',},link: function(scope,element,attrs,controller) {
            scope.$watch('@R_301_182@s',function() {
                element.removeClass('ok');
                element.removeClass('warning');
                if (scope.@R_301_182@s.Indicator == 'Negative') {
                    element.addClass('warning');
                } else {
                    element.addClass('ok');
                }
            },true);
        }
    };
}]);

angularjs – 根据值应用ng-class

猜你在找的Angularjs相关文章