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例如)

顺便说一句,这里有一个图标库,你可以获取星/半星/空星:真棒图标

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>