Angular 5星评级酒吧

Question

我想使用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> 

Answer 1

我认为使用bootstrap这个例子可能会有所帮助： Plunker

<强> 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

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

您可以覆盖它并提供自定义图像。但方式是相同的（例如ng-class）

顺便说一下，这里有一个图标库，你可以获取星/半星/空星：Awesome Icons

Answer 2

我找到了这个简单的解决方案..

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

Answer 3

尽管你的问题仅仅是一个AngularJs的问题，我还有另外一个建议，即用algo Angular Js来达到你想要的效果，但需要一点Css技巧。

首先，我会得到两个 5星图像，一个'空'或灰色，一个'全'或黄色，如下所示：

然后我会用灰色星星创建一个 div ，用亮黄色创建叠加div 。两者都使用background-image代替常规<img>代码，这样做我可以更改覆盖div的宽度，以达到所需的评分量。

看看这个quick fiddle （我为这些糟糕的图片道歉，这是我可以通过谷歌图片获得的快速演示 - 玩全明星的宽度div见）

首先，我将按以下方式组织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>

全星的宽度将决定出现多少星星。

使用以下 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 */
}

干杯。