javascript - 値に基づいて 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}"

これにより、電流が最大値以上の場合はアボカド グリーンになり、電流が最大値未満の場合はピンク色になります。しかし、このng-classをbarsCurrentディレクティブ内に配置しても、何も起こりませんでした。

これを実装するための解決策を提案できますか? ありがとう

Answer 1

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