Custom star rating Angularjs

Question

I am trying to do the custom star rating with angular.js, where I will have different set of images. I need to change it dynamically on hover the image. I am having 5 images

X X X X X

if I move the mouse pointer to 4th X I should be able to dynamically change

• • • • X

I used directive to achieve it.

.directive('fundooRating', function () {

return {
  restrict: 'A',
  template: '<ul class="rating">' +
              '<li ng-repeat="star in stars" ng-class="star" 
                 ng-click="toggle($index)"><img ng-mouseenter="hoveringOver($index)"

ng-src="{{con}}" />' + '', scope: { ratingValue: '=', max: '=', readonly: '@', onRatingSelected: '&' }, link: function (scope, elem, attrs) {

    var updateStars = function() {
      scope.stars = [];
      for (var  i = 0; i < scope.max; i++) {
        scope.stars.push({filled: i < scope.ratingValue});
      }
    };
    scope.con = "Images/Rating/empty.png";
    scope.hoveringOver = function(index){
      var countIndex = index+1;
      scope.Condition = "Good.png"
      console.log("Hover  " + countIndex);
    };
    scope.toggle = function(index) {
      if (scope.readonly && scope.readonly === 'true') {
        return;
      }
      scope.ratingValue = index + 1;
      scope.onRatingSelected({rating: index + 1});
    };

    scope.$watch('ratingValue', function(oldVal, newVal) {
      if (newVal) {
        updateStars();
      }
    });
  }
}   });

How can I able to find which image my mouse pointer is and how to change the rest of Images. I want to do the custom rating option.

Answer 1

You'll need a condition for each star in your updateStars function, either as a property for each, or a separate array. Then, you can do something like this:

scope.hoveringOver = function(index){
    for (var i = 0; i <= index; i++) {
        scope.stars[i].Condition = "Good.png";
    }
};

Or the separate array way (assuming the array is scope.conditions):

scope.hoveringOver = function(index){
    for (var i = 0; i <= index; i++) {
        scope.conditions[i] = "Good.png";
    }
};

You also need a function opposite of hoveringOver to remove the states to default/previous versions.

Answer 2

Angular UI gives you premade directives for the same purpose, did you try it?

http://angular-ui.github.io/bootstrap/

Go down to the Rating Title in the same page, i think it might solve your purpose.