javascript - 自定义星级评定 Angularjs

Question

我正在尝试使用 angular.js 进行自定义星级评分，我将在其中使用不同的图像集。我需要在悬停图像时动态更改它。我有 5 张图片

X X X X X

如果我将鼠标指针移动到第 4 个 X 我应该能够动态更改

• • • • X

我使用指令来实现它。

.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();
      }
    });
  }
}   });

我怎样才能找到我的鼠标指针所在的图像以及如何更改其余图像。我想做自定义评级选项。

Answer 1

Angular UI 为您提供了用于相同目的的预制指令，您试过了吗？

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

在同一页下到评级标题，我认为它可能会解决您的目的。