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

问题描述

这是一个在 angularjs 中显示星级的代码.在某些时候，我需要获得整个系统中所有评分的平均值，而不是 rate:2 ，我将获得 2.4 .在这种情况下，我很有趣地展示 2 颗星，它们是完全填充的，而一颗只填充了一半.如何更改我的代码以添加此功能?此外，最初我不想指定任何星星填充.这也需要修改，我不知道应该怎么做?

<h1>角度星级评定指令</h1><div star-rating ng-model="rating1" max="10" on-rating-selected="rateFunction(rating)"></div><star-rating ng-model="rating2" readonly="isReadonly"></star-rating><标签><input type="checkbox" ng-model="isReadonly"/>是只读的<div><strong>评分 1:</strong>{{rating1}}
<div><strong>评分 2:</strong>{{rating2}}

在我的指令中

angular.module("app", []).controller("RatingCtrl", function($scope) {$scope.rating1 = 1;$scope.rating2 = 2;$scope.isReadonly = true;$scope.rateFunction = 函数(评级){console.log("已选择评分:" + rating);};}).directive("starRating", function() {返回 {限制:EA"，模板:<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>",范围 : {ratingValue : "=ngModel",max : "=?",//可选:默认为 5onRatingSelected : "&?",只读:=?"},链接:函数(范围，元素，属性){if (scope.max == undefined) { scope.max = 5;}函数 updateStars() {scope.stars = [];for (var i = 0; i 

和CSS

.rating {边距:0；填充:0；显示:内联块；}.rating li {填充:1px；颜色:#ddd;字体大小:20px；文本阴影:.05em .05em #aaa;列表样式类型:无；显示:内联块；光标:指针；}.rating li.fill {颜色:#fd0；}.rating.readonly li.fill {颜色:#666；}

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

感谢您的帮助.

解决方案

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

最上面的一组星星都被填满了，但是它的容器的宽度可以调整到代表你的比率的星星的比例.

var score = 2.4;var maxStars = 5;var starContainerMaxWidth = 100;//像素var fillInStarsContainerWidth = score/maxStars * starsMaxWidth;

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

更新:

我打了一个简单的例子 http://codepen.io/anon/pen/NqazVa , 需要一些整理和重新洗牌，但平均汇率计算和显示正确.

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>

In my directive

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

and 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

Thank you for any help.

解决方案

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;

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.

Update:

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屋！