angularjs – 根据值应用ng-class
发布时间:2020-12-17 07:54:15 所属栏目:安全 来源:网络整理
导读:我有一个简单的ng-repeat,它显示一个得分列表和一个正面或负面的值. 我想要做的是当值为Negative时,显示红色背景CSS类,当为Positive时,显示绿色CSS类.但是,出于某种原因,我总是在页面上看到红色的CSS类. HTML: tr ng-repeat="scores in Test" ng-class="{tr
我有一个简单的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); } }; }]); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |