Question

这是一个代码，用于显示angularjs中的星级代码。在某些时候，我需要在整个系统中得到所有评级的平均值，而不是率：2，我将有2.4。在这种情况下，我很有兴趣提出完全填充的2颗星和仅填充了一半的星。如何更改我的代码以添加此功能？此外，最初我不想指定任何明星填充。那还需要修改，我不知道应该怎么做？

<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

感谢您的帮助。

Answer 1

你可以使用两组相同的星星来实现这一点，将绝对的一个放在另一个上面。一个填充背景星形（灰色），顶部的一个位置代表填充。

顶部的星星都被填满，但其容器的宽度可以调整为代表你的速度的星星的比例。

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

隐藏的CSS溢出会隐藏未打开的星星部分，实际上可以显示填充的2.4星。

<强>更新

我已经给出了一个快速示例http://codepen.io/anon/pen/NqazVa，需要一些整理和重新洗牌，但平均费率会被计算并正确显示。

Answer 2

检查AngularUI Bootstrap评级组件。

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

为angularjs中的注释创建十进制星级评分

2 个答案: