Question

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

X X X X X

如果我将鼠标指针移动到4th 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}}”/＆gt;' + '，范围： { ratingValue：'='， max：'='，只读： '@'， onRatingSelected：'＆amp;' }， 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/

在同一页面中查看评级标题，我认为这可能会解决您的目的。

Answer 2

您需要为updateStars函数中的每个星形创建一个条件，作为每个星的属性或单独的数组。然后，你可以这样做：

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

或单独的数组方式（假设数组为scope.conditions）：

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

您还需要一个与hoveringOver相反的功能，以将状态删除为默认/以前的版本。

自定义星级Angularjs

2 个答案: