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.
Angular UI gives you premade directives for the same purpose, did you try it?
Go down to the Rating Title in the same page, i think it might solve your purpose.
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:
Or the separate array way (assuming the array is
scope.conditions
):You also need a function opposite of hoveringOver to remove the states to default/previous versions.