自定义星级Angularjs [英] Custom star rating Angularjs

问题描述

我试图做定制的星级评级，angular.js，在那里我会有不同的图像。我需要动态改变它的形象徘徊。我有5张图片。

  

X X X X X

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

  

  
• 
    
  • 
      
    • 
        
      • X
      
        
    
      
  
    

  

我用指令来实现它。

  

.directive（'fundooRating'，函数（）{

  {回报
  限制：'A'，
  模板：'＆LT; UL类=评级＆GT;' +
              '＆LT;李NG重复=明星星NG-CLASS =明星
                 NG-点击=切换（$指数）＆GT;＆LT; IMG NG-的mouseenter =hoveringOver（$指数）
 

  
  

NG-SRC ={{CON}}/> +
                  ''，
        范围： {
          ratingValue：'='，
          马克斯：'='，
          只读： '@'，
          onRatingSelected：'和;'
        }，
        链接：功能（范围，ELEM，ATTRS）{

  VAR updateStars =功能（）{
      scope.stars = [];
      对于（VAR I = 0; I＆LT; scope.max;我++）{
        scope.stars.push（{填写：I＆LT; scope.ratingValue}）;
      }
    };
    scope.con =图像/等级/ empty.png
    scope.hoveringOver =功能（指数）{
      VAR countIndex =指数+ 1;
      scope.Condition =Good.png
      的console.log（悬停+ countIndex）;
    };
    scope.toggle =功能（指数）{
      如果（scope.readonly＆安培;＆安培; scope.readonly ==='真'）{
        返回;
      }
      scope.ratingValue =指数+ 1;
      scope.onRatingSelected（{评价：指数+ 1}）;
    };    范围。$腕表（'ratingValue'，函数（OLDVAL，的newval）{
      如果（的newval）{
        updateStars（）;
      }
    }）;
  }
}}）;
 

我如何能找到哪个图像我的鼠标指针，以及如何改变图像的其余部分。我想要做自定义等级的选项。

解决方案

您需要在您的updateStars函数中的每个明星的条件，无论是作为每个属性，或一个单独的数组。然后，你可以做这样的事情：

  scope.hoveringOver =功能（指数）{
    对于（VAR I = 0;我LT＆=指数;我++）{
        scope.stars [I] .Condition =Good.png;
    }
};
 

或单独的阵列方式（假设数组是 scope.conditions ）

  scope.hoveringOver =功能（指数）{
    对于（VAR I = 0;我LT＆=指数;我++）{
        scope.conditions [I] =Good.png;
    }
};
 

您还需要hoveringOver的功能相反，除去状态默认/ previous版本。

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.

解决方案

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:

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

Or the separate array way (assuming the array is scope.conditions):

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

You also need a function opposite of hoveringOver to remove the states to default/previous versions.

这篇关于自定义星级Angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！