大佬教程收集整理的这篇文章主要介绍了angularjs – 根据值应用ng-class,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我想要做的是当值为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; }
<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,请注明来意。