Angular 5星級評分欄

Question

我想顯示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

我發現這個symple解決方案..

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

我覺得這個例子中使用的引導可能會有所幫助：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例如）

BTW，這裏是一個圖標庫從那裏你可以獲取星/半星/空星：Awesome Icons

Answer 3

儘管你的問題是有資格作爲只是一個AngularJs的問題我還有一個其他建議，可以使用算法Angular Js來達到你想要的效果，但是有一點Css技巧。

首先，我會得到兩個5星級圖像一個「空」或灰色和一個「完全」或黃色的，像這樣：

然後，我將創建一個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 */ 
} 

乾杯。