Html Angular 5 星评级栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20536987/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 5 star rating bar
提问by Isuru
I want to show 5 star rating bar using angular and currently my code work only for integers with full star. But i want to use half stars for decimal values. how can i change this code. I can't use IF in my angular version.
我想使用 angular 显示 5 星评级栏，目前我的代码仅适用于带有满星的整数。但我想对十进制值使用半星。我该如何更改此代码。我不能在我的角度版本中使用 IF。
<li ng-repeat="Star in [1,2,3,4,5]">
<div ng-switch="Item.ItemDetails.Rating >= Star">
<div ng-switch-when="true">
<img src="~/Images/star.png" class="star" />
</div>
<div ng-switch-when="false">
<img src="~/Images/star_gray.png" class="star" />
</div>
</div>
</li>
回答by Maxim Shoustin
I think this example by using bootstrap might be helpful: Plunker
我认为这个使用 bootstrap 的例子可能会有所帮助： Plunker
HTML
HTML
<form class="Scroller-Container" ng-submit="submit()" ></form>
<rating
value="rate"
max="max"
readonly="isReadonly"
on-hover="hoveringOver(value)"
on-leave="hoveringLeave(rate)" >
</rating>
<span
class="badge"
ng-class="{'badge-warning': percent<30, 'badge-info': percent>=30 && percent<70, 'badge-success': percent>=70}"
ng-show="overStar && !isReadonly">
{{percent}}%
</span>
<input type="submit" id="submit" value="Submit" />
</form>
JS
JS
var RatingDemoCtrl = function ($scope) {
$scope.myRate = 0;
$scope.submit = function() {
console.log($scope.percent) ; //null
}
$scope.rate = 1;
$scope.max = 5;
$scope.isReadonly = false;
$scope.percent = 20;
$scope.hoveringOver = function(value,object) {
console.log('hoveringOver', value);
$scope.overStar = value;
$scope.percent = (100 * $scope.overStar) / $scope.max;
};
$scope.hoveringLeave = function(rate) {
console.log('hoveringLeave', $scope.rate);
$scope.percent = (100 * $scope.rate) / $scope.max;
};
};
You can override it and provide custom image. But the way is the same (with ng-classfor example)
您可以覆盖它并提供自定义图像。但方法是一样的（ng-class例如）
BTW, here is a icon library from there you can fetch star/half-star/empty star: Awesome Icons
顺便说一句，这里有一个图标库，您可以从那里获取星形/半星形/空星形：Awesome Icons
回答by Isuru
I found this symple solution..
我找到了这个简单的解决方案..
<li ng-repeat="Star in [1,2,3,4,5]">
<div ng-switch="store.Rating >= Star">
<div ng-switch-when="true">
<img src="~/Images/star.png" class="star" />
</div>
<div ng-switch-when="false">
<div ng-switch="store.Rating > (Star-1)">
<div ng-switch-when="true">
<img src="~/Images/star_half.png" class="star" />
</div>
<div ng-switch-when="false">
<img src="~/Images/star_gray.png" class="star" />
</div>
</div>
</div>
</div>
</li>
回答by Lucas Lazaro
despite your question is qualified as just an AngularJs question I have a other suggestion to approach your desired effect with algo Angular Js but a little bit of Css trick.
尽管你的问题只是一个 AngularJs 问题，但我还有一个建议，可以用算法 Angular Js 来达到你想要的效果，但有点 Css 技巧。
First I would get two 5 starimages one 'Empty' or gray and one 'Full' or yellow like so:
首先，我会得到两张5 星图像，一张是“空”或灰色，一张是“满”或黄色，如下所示：
Then I would create a divwith the graystars and a overlay divwith the bright yellowones. Both using background-imageinstead of regular <img>tags, doing this I would be able to change the width of the overlay div to achieve the amount of rating necessary.
然后，我将创建一个DIV与灰色的星星和覆盖DIV与明黄色的。两者都使用background-image而不是常规<img>标签，这样做我将能够更改覆盖 div 的宽度以达到所需的评分量。
Check out this quick fiddle(I apologize for the poor images, it was what I could get from google images for a quick demo - play around with the width in the full-star div to see)
查看这个快速小提琴（我为糟糕的图像道歉，这是我可以从谷歌图像中获得的快速演示 - 在全星 div 中使用宽度来查看）
First I would organize the Html as the following:
首先，我将 Html 组织如下：
<div class="star-rating">
<!-- The '|| 0' would prevent an undefined or null value on the Rating property -->
<div class="full-star" style="width: {{Item.ItemDetails.Rating * 20 || 0}}%"></div>
<div class="empty-star"> </div>
</div>
The width on the full-star will determine how much of the star would appear.
满星上的宽度将决定星星出现的数量。
With the following Css:
使用以下CSS：
/* This is just an example instead of using <img> tags you can use background-image and achive half-star results */
.star-rating {
position: relative;
/* other styles to match preference */
}
.full-star {
position: absolute;
z-index: 1;
height: 100%;
background-image: url('PATH_TO ~/Images/star.png');
/* other styles to match preference */
}
.empty-star {
width: 100%;
height: 100%;
background-image: url('PATH_TO ~/Images/star_gray.png');
/* other styles to match preference */
}
Cheers.
干杯。
