How to change the color of the div based on a value

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;
    });

This is for the gray-colored bar:

    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--;
                    }
                });
            }
        };
    });

This is for the green-colored bar:

    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>

This is the body of the code:

<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>

I would like to put an:

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

in the barsCurrent directive so that if current is greater than or equal to max it is color avocado green and if current is less than max, it is color pink. However when I placed this ng-class inside the barsCurrent directive, nothing happened.

Can you suggest any solution to implement this? Thanks

Answer 1

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