1

Closed

Hovering over is not working with ng-repeat (angularjs)

description

It's all up there in the heading :).

If you put RATEIT withing ng-repeat
<div ng-repeat="x in records">
<div class="rateit" id="rateit5" data-rateit-min="2">
</div>
<div>
    <span id="value5"></span>
    <span id="hover5"></span>
</div>
 
<script type="text/javascript">
    $("#rateit5").bind('rated', function (event, value) { $('#value5').text('You\'ve rated it: ' + value); });
    $("#rateit5").bind('reset', function () { $('#value5').text('Rating reset'); });
    $("#rateit5").bind('over', function (event, value) { $('#hover5').text('Hovering over: ' + value); });
</script>    
</div>
the over functionality is not triggered/not working.

If you need more information just ask me. It would be great if you could fix it.


It took me quite some time but here it comes
UPDATE THIS IS HOW TO HOVER ALMOST WORKS IN NG-REPEAT

html view
 <div ng-repeat="x in records">
            <div class="rateit" id="myRating{{x.ID}}" data-rateit-min="0" ng-mouseover="gimmeHoverValue(x.ID)">
                 <i >{{yourCurrentHoverVote[x.ID]}}</i>
            </div>
</div>
javascript controller

//init stuff
$scope.yourCurrentHoverVote= [];
//function
    $scope.gimmeHoverValue = function(myID) {
             $("#myRating" + myID).bind('hover', function (event, value) {
                 //alert("XX " + value);
                 $scope.yourCurrentHoverVote[myID] = value;
            });
ALMOST MEANS if you mouseover from LEFT to RIGHT it is working perfectly
If you mouseover from RIGHT to LEFT (Stars 5,4,3,2,1) the value is not updated until I move with my mouse to the right.....

TT I dont get it.


MY HOPEFULLY LAST FUCKING UPDATE
 $scope.$apply(function () {
                     $scope.yourCurrentVote[myID] = value;
                 });
TO resolve my last mentioned issue force angular to update your screen, AngularJs is a really bitchy bitch, so if you increment it does update if you decrement it doesnt. lol thats funny.

Good Night
Closed Jan 16, 2016 at 9:08 AM by gidon
Pointed to angularjs fork of rateit. No response from user.

comments

DDDDDDDDDDDDDDDDD wrote May 11, 2015 at 6:19 PM

By the way except this issue everything else is working perfectly with Angularjs (dynamic ids etc).
I tried many others and they were quite awful especially dealing with the customization.

So really nice job for this :) Thank you

gidon wrote May 19, 2015 at 5:43 AM

There is a "fork" of rateit which is build for Angular : https://github.com/akempes/angular-rateit
See if that works for you, and let me know if it does.