Angular Bootstrap評分系統

我試圖用第一個評分爲100％，第二個90％，第三個80％......第十一個評分中立，第十二個評分爲10％，第十三個評分爲20 ％等等高達100％。儘管在滾動和選擇時顯示這些評分是實時的。如果您將鼠標懸停在收視率上，您會看到我所描述的收視率。找不到angularjs來顯示它..我也想顯示總票數。 https://zepzia.github.io/angular-bootstrap-rating/Angular Bootstrap評分系統

<!DOCTYPE html> 
<html lang="en" ng-app="myModule"> 
<head> 
    <meta charset="utf-8"> 
    <title>Angular Bootstrap Rating</title> 
    <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/less/bootstrap.less">, 
    <link rel="stylesheet" type="text/css" href="'bower_components/bootstrap/dist/js/bootstrap.js'"> 
    <link rel="stylesheet" type="text/css" href="bower_components/bootstrap-css/css/bootstrap.min.css"> 
    <script src="bower_components/angular/angular.js"></script> 
    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script> 
    <script src="bower_components/angular/app.js"></script> 
</head> 
<body> 
<div class="container"> 
    <div ng-controller="RatingDemoCtrl"> 
     <h4>Rating</h4> 
     <span uib-rating ng-model="rate" max="max" read-only="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" titles="['100%','90%','80%','70%', '60%', '50%', '40%', '30%', '20%', '10%', 'Neutral', '10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%']" state-on="'glyphicon-ok-sign'" state-off="'glyphicon-ok-circle'" aria-labelledby="custom-icons-1" style="font-size: 30px"></span> 
     <span class="label" ng-class="{'label-warning': percent<30, 'label-info': percent>=30 && percent<70, 'label-success': percent>=70}" ng-show="overStar && !isReadonly">{{percent}}%</span> 


    </div> 
</div>

var app = angular.module('myModule', ['ui.bootstrap']); 

app.controller('RatingDemoCtrl', function ($scope) { 
    $scope.rate = 7; 
    $scope.max = 21; 
    $scope.isReadonly = false; 

    $scope.hoveringOver = function(value) { 
    $scope.overStar = value; 
    $scope.percent = 100 * (value/$scope.max); 
    }; 

    $scope.ratingStates = [ 
    {stateOn: 'glyphicon-ok-sign', stateOff: 'glyphicon-ok-circle'}, 
    {stateOn: 'glyphicon-star', stateOff: 'glyphicon-star-empty'}, 
    {stateOn: 'glyphicon-heart', stateOff: 'glyphicon-ban-circle'}, 
    {stateOn: 'glyphicon-heart'}, 
    {stateOff: 'glyphicon-off'} 
    ]; 
});

來源

2016-12-14 Tripp

屏幕閱讀器是什麼意思？ – digit

@digit對不起屏幕閱讀器可能不是正確的參考...我爲每個複選標記設置標題，顯示我正在嘗試向右顯示實時...但是您必須將鼠標懸停在第二個複選標記上出現 – Tripp

這裏的工作演示，以顯示你實時滾動標題。

var app = angular.module('myModule', ['ui.bootstrap']); 
 

 
app.controller('RatingDemoCtrl', function ($scope) { 
 
    $scope.titlesw= ['100%','90%','80%','70%', '60%', '50%', '40%', '30%', '20%', '10%', 'Neutral', '10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%']; 
 
    $scope.rate = 7; 
 
    $scope.max = 21; 
 
    $scope.overStar = $scope.rate+1; 
 
    $scope.selectedTitle=$scope.titlesw[$scope.rate-1]; 
 
    
 
    $scope.neutralIndex= $scope.titlesw.indexOf('Neutral')+1; 
 
    
 
    $scope.hoveringOver = function(value) { 
 
    $scope.selectedTitle = $scope.titlesw[value-1]; 
 
    $scope.overStar = value; 
 
    $scope.percent = 100 * (value/$scope.max); 
 
    }; 
 

 
    $scope.ratingStates = [ 
 
    {stateOn: 'glyphicon-ok-sign', stateOff: 'glyphicon-ok-circle'}, 
 
    {stateOn: 'glyphicon-star', stateOff: 'glyphicon-star-empty'}, 
 
    {stateOn: 'glyphicon-heart', stateOff: 'glyphicon-ban-circle'}, 
 
    {stateOn: 'glyphicon-heart'}, 
 
    {stateOff: 'glyphicon-off'} 
 
    ]; 
 
});

<!DOCTYPE html> 
 
<html lang="en" ng-app="myModule"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Angular Bootstrap Rating</title> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.3.1/ui-bootstrap-tpls.js"></script> 
 
</head> 
 
<body> 
 
<div class="container"> 
 
    <div ng-controller="RatingDemoCtrl"> 
 
     <h4>Rating</h4> 
 
     <span uib-rating ng-model="rate" max="max" read-only="isReadonly" on-hover="hoveringOver(value)" on-leave="selectedTitle = titlesw[rate-1];overStar=rate+1" titles="titlesw" state-on="'glyphicon-ok-sign'" state-off="'glyphicon-ok-circle'" aria-labelledby="custom-icons-1" style="font-size: 30px"></span>  
 
     <span class="label" ng-class="{'label-info': overStar<neutralIndex, 'label-warning': overStar>=neutralIndex}" ng-show="overStar">Average: {{selectedTitle}}</span> 
 

 

 
    </div> 
 
</div>

我希望我正確地理解你的問題，並解決它。

來源

2016-12-14 13:28:42

你是一個天才..謝謝！ – Tripp

訣竅是什麼將不斷顯示百分比作爲計數平均值？再次感謝！！！！！ – Tripp

您還需要百分比來與投票一起顯示嗎？ –

Angular Bootstrap評分系統

回答

相關問題