Shikha thakur Shikha thakur - 4 months ago 42
AngularJS Question

uib-rating not getting color when append css using ng-class

I am using stars for ratings for which I used ui bootstrap rating directive and when I hover on those stars I need to change the color based on that.

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


Here is what i have tried

DEMO

Answer

You need to put like this

ng-class="addColor"

instead of

ng-class="{{addColor}}"