Как изменить цвет DIV на основе значения

Question

Here are the scripts and style that I used: 

<script src="angular.min.js"></script> 
<style> 
    .greater { 
     color:#D7E3BF; 
     background-color:#D7E3BF; 
    } 
    .less { 
     color:#E5B9B5; 
     background-color:#E5B9B5; 
    } 
</style> 
<script> 
    var app = angular.module('MyTutorialApp', []); 
    app.controller("controller", function ($scope) { 
     $scope.chargeability = [{ date: '15-Sep-13', max: 100, current: 100 }, 
     { date: '30-Sep-13', max: 60, current: 50 }, 
     { date: '15-Oct-13', max: 80, current: 20 }]; 
     $scope.ytd = 122; 
    }); 

Это для серого цвета панели:

app.directive('barsMax', function() { 
     return { 
      restrict: 'E', 
      link: function postLink(scope, element, attrs) { 
       attrs.$observe('value', function (newValue) { 
        // value attribute has changed, re-render    
        var value = Number(newValue); 
        var dval = value/3; 
        element.children().remove(); 
        while (dval > 0) { 
        element.append('<div id="bar" style="float:left; color:#D8D8D8; height: 17px;margin-top:7px;background-color:#D8D8D8;">.</div>') 
         dval--; 
        } 
       }); 
      } 
     }; 
    }); 

Это для зеленого цвета панели:

app.directive('barsCurrent', function() { 
     return { 
      restrict: 'E', 
      link: function postLink(scope, element, attrs) { 
       attrs.$observe('value', function (newValue) { 
        // value attribute has changed, re-render    
        var value = Number(newValue); 
        var dval = value/3; 
        element.children().remove(); 
        while (dval > 0) { 
         element.append('<div id="bar" style="float:left; color:green; height: 17px;margin-top:7px;background-color:green;">.</div>') 
         dval--; 
        } 
       }); 
      } 
     }; 
    }); 
</script> 

Это тело кода:

<div ng-repeat="charge in chargeability"> 
    <bars-max style="z-index:-1;float:left;margin-top:-24px;" value="{{charge.max}}"></bars-max> 
    <bars-current style="z-index:-1;float:left;margin-top:-24px;" value="{{charge.current}}"></bars-current> 
    <div style="clear:both;height:6px;"></div> 
</div> 

Я хотел бы поставить:

ng-class="{'greater': charge.current >= charge.max, 'less': charge.current < charge.max}" 

в директиве barsCurrent так, что если ток больше или равен макс это цвет авокадо зеленый и если ток меньше максимальной, то розовый цвет. Однако, когда я разместил этот ng-класс внутри директивы barsCurrent, ничего не произошло.

Вы можете предложить любое решение для его осуществления? Благодаря

Answer 1

ng-class="{true: 'greater',false: 'less'}[charge.current >= charge.max]"