为angularjs中的评论创建一个十进制星级 [英] create a decimal star rating for a comment in angularjs

问题描述

这是一个代码，用于在angularjs中显示星级评分代码.在某一点上，我需要对整个系统的所有评级进行平均，因此我将获得2.4而不是rate:2.在这种情况下，我很高兴提出2个完全填充的星星和一个只有一半填充的星星.如何更改代码以添加此功能? 此外，最初，我不想指定任何填充的星星.这还需要修改，我不确定该怎么做?

Here is a code which present star rating code in angularjs. In some point I need to have a average of all the rating in whole the system so instead of rate:2 , i will have 2.4 . In such case i am interesting to present 2 star which are complete fill and one which has only half filled. How can I change my code in order to add this functionality? Moreover, initially I would like to don't specify any star filled. That's also need a modification which I am not sure how should be done?

<div ng-app="app" ng-controller="RatingCtrl" class="container">
  <h1>Angular Star Rating Directive</h1>
  <div star-rating ng-model="rating1" max="10" on-rating-selected="rateFunction(rating)"></div>
  <star-rating ng-model="rating2" readonly="isReadonly"></star-rating>
  <label>
    <input type="checkbox" ng-model="isReadonly" /> Is Readonly
  </label>

  <div><strong>Rating 1:</strong> {{rating1}}</div>
  <div><strong>Rating 2:</strong> {{rating2}}</div>
</div>

在我的指令中

angular.module("app", [])
.controller("RatingCtrl", function($scope) {
  $scope.rating1 = 1;
  $scope.rating2 = 2;
  $scope.isReadonly = true;
  $scope.rateFunction = function(rating) {
    console.log("Rating selected: " + rating);
  };
})
.directive("starRating", function() {
  return {
    restrict : "EA",
    template : "<ul class='rating' ng-class='{readonly: readonly}'>" +
               "  <li ng-repeat='star in stars' ng-class='star' ng-click='toggle($index)'>" +
               "    <i class='fa fa-star'></i>" + //&#9733
               "  </li>" +
               "</ul>",
    scope : {
      ratingValue : "=ngModel",
      max : "=?", //optional: default is 5
      onRatingSelected : "&?",
      readonly: "=?"
    },
    link : function(scope, elem, attrs) {
      if (scope.max == undefined) { scope.max = 5; }
      function updateStars() {
        scope.stars = [];
        for (var i = 0; i < scope.max; i++) {
          scope.stars.push({
            filled : i < scope.ratingValue
          });
        }
      };
      scope.toggle = function(index) {
        if (scope.readonly == undefined || scope.readonly == false){
          scope.ratingValue = index + 1;
          scope.onRatingSelected({
            rating: index + 1
          });
        }
      };
      scope.$watch("ratingValue", function(oldVal, newVal) {
        if (newVal) { updateStars(); }
      });
    }
  };
});

和CSS

.rating {
  margin: 0;
  padding: 0;
  display: inline-block;
}
.rating li {
  padding: 1px;
  color: #ddd;
  font-size: 20px;
  text-shadow: .05em .05em #aaa;
  list-style-type: none;
  display: inline-block;
  cursor: pointer;
}
.rating li.filled {
  color: #fd0;
}
.rating.readonly li.filled {
  color: #666;
}

http://codepen.io/anon/pen/RPLJYW

谢谢您的帮助.

推荐答案

您可以使用两组相同的恒星来实现此目的，绝对将一颗恒星置于另一颗恒星之上.一个填充您的背景星形(灰色)，顶部的一个位置代表您的填充.

You could use two identical set of stars to achieve this, position absolute one on top of the other. One fills your background star shapes (gray) and the one position at the top will represent your fill.

最上面的星星都被填满了，但是容器的宽度可以调整为代表您的房价的星星的比例.

The top set of stars are all filled but its container's width can be adjusted to the proportion of stars representing your rate.

var score = 2.4;
var maxStars = 5;
var starContainerMaxWidth = 100; //pixls
var filledInStarsContainerWidth = score / maxStars * starsMaxWidth;

隐藏的CSS溢出将隐藏未打开的星星部分，实际上使您可以显示2.4颗填充的星星.

A CSS overflow hidden will hide the portion of stars that are not turned on, in effect allowing you to show 2.4 stars filled.

更新:

我已经举了一个简短的例子 http://codepen.io/anon/pen/NqazVa，需要进行一些整理和重新整理，但平均费率已正确计算并显示.

I have bashed a quick example http://codepen.io/anon/pen/NqazVa , will need some tidy up and reshuffling but the average rate is calculated and displayed correctly.

这篇关于为angularjs中的评论创建一个十进制星级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！