Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了angularjs – 根据值应用ng-class大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个简单的ng-repeat,它显示一个得分列表和一个正面或负面的值.

我想要做的是当值为Negative时,显示红色背景CSS类,当为Positive时,显示绿色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;
}
我还没有看到之前使用的特定语法,{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);
        }
    };
}]);

大佬总结

以上是大佬教程为你收集整理的angularjs – 根据值应用ng-class全部内容,希望文章能够帮你解决angularjs – 根据值应用ng-class所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。