javascript - 使用 ng-class 附加 css 时 uib-rating 没有变色

Question

我使用 ui bootstrap 评级指令为评级使用星星，当我将鼠标悬停在这些星星上时，我需要根据它更改颜色。

HTML:

 <p class="col-xs-2">Ratings:</p>
   <uib-rating ng-model="rate"  max="max" read-only="isReadonly" on-hover="rating=value;hoveringOver(value)" ng-class="{{addColor}}" ng-click="viewPage||fnPutRating(rating)" on-leave="overStar = null" titles="['one','two','three']" aria-labelledby="default-rating"></uib-rating>

JS:

$scope.rate = 0;
    $scope.max = 5;
    $scope.isReadonly = false;
    $scope.hoveringOver = function(value) {
        debugger;
        $scope.lol = true;
        console.log(value);
        switch (value) {
            case 1:
                $scope.addColor = "red";

                break;
            case 2:

                $scope.addColor = "red";

                break;
            case 3:
                $scope.addColor = "green";
                break;
            case 4:
                $scope.addColor = "green";
                break;
            case 5:
                $scope.addColor = "gold";
                break;

        }
    };

CSS:

.red {
color: red;
}

.green {
color: green;
}

.gold {
    color: #FFD700;
}

这是我尝试过的

DEMO

Answer 1

你需要这样写

ng-class="addColor"

代替

ng-class="{{addColor}}"