Versuch ng-Klasse mit ng-Mouseover- und ng-mouseleave ändern

Question

Ich habe diesen Code:

Controller:

var ratingTotal = 5; 
$scope.count = 0; 
$scope.getRepeater = function() { 
     return new Array(ratingTotal); 
}; 

HTML:

<div> 
    <span ng-repeat="r in getRepeater() track by $index" ng-mouseover="count = count + 1" ng-mouseleave="count =count-1" ng-class="{'icon-star-full': ($index + 1) <= count, 'icon-star-empty': ($index + 1) >= count}"></span> 
</div> 

und ich versuche zu make icon-start-full, indem man die Maus über das Icon fährt und verschwindet, wenn man das div verlässt, aber es hat nicht funktioniert

PD: class icon-start- voll und Symbol-Start-leer sind icomoon Klassen

Answer 1

Es ist aus Herumspielen mit diesem Code für ein paar Minuten, dass die count Variable in den ng-mouseleaveng-mouseover, Bezug genommen wird, und ng-class ist nicht die gleiche Variable. Angular hat einige abgefahrene Dinge manchmal mit variabler Scoping so, und so ist dies ein perfektes Beispiel dafür, warum Sie immer die controller as Syntax in AngularJS verwenden sollten. Es ist gut dokumentiert Here, by Todd Motto wie und warum es zu verwenden.

So können Sie Ihren Code so ändern, dass er mit controller as funktioniert, damit Sie nicht auf Probleme stoßen, mit denen Sie Probleme haben.

var app = angular.module("myApp", []) 
 
.controller("myCtrl", function(){ 
 
    var $this = this; 
 
    var ratingTotal = 5; 
 
    $this.count = 0; 
 
    $this.getRepeater = function() { 
 
    return new Array(ratingTotal); 
 
    }; 
 
});

.icon-star-full, .icon-star-empty { 
 
    padding: 10px; 
 
} 
 
.icon-star-full { 
 
    background: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl as Main"> 
 
    <div> 
 
    <span ng-repeat="r in Main.getRepeater() track by $index" ng-mouseover="Main.count = $index + 1" ng-mouseleave="Main.count = 0" ng-class="{'icon-star-full': ($index + 1) <= Main.count, 'icon-star-empty': ($index + 1) >= Main.count}">{{$index + 1}}</span> 
 
    </div> 
 
</div>