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指令中

，如果当前大于或等于max，则为绿色，如果当前小于max，则为粉红色。但是，当我将这个ng-class放在barsCurrent指令中时，什么也没发生。

您能否建议实施此解决方案？感谢

Answer 1

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

如何根据值更改div的颜色

1 个答案: