我有一个简单的ng-repeat,它显示一个得分列表和一个正面或负面的值.
我想要做的是当值为Negative时,显示红色背景CSS类,当为Positive时,显示绿色CSS类.但是,出于某种原因,我总是在页面上看到红色的CSS类.
HTML:
CSS:
- .warning {
- background: red;
- }
- .ok {
- background: green;
- }
我还没有看到之前使用的特定语法,{true:’warning’,false:’ok’} [scores.Indicator ==’Negative’]背后的理由是什么?
我在这里使用ngClass的方式是
那样有用吗?
为了更好的可读性,您也可以将其委托给控制器
或者你可以创建一个指令
- <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);
- }
- };
- }]);