Question

我试图使用21分制，第一评分为100％，第二评分为90％，第三评分为80％....第11评级为中性，第12评级为10％，第13评级为20％等等高达100％。虽然这些评级显示实时滚动和选择。如果您将鼠标悬停在评级上，您将看到我所描述的评级。无法弄清楚angularjs让它显示..我也想显示投票总数。 https://zepzia.github.io/angular-bootstrap-rating/

    <!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'}
  ];
});

Answer 1

以下是在实时滚动中显示标题的工作演示。

＆＃13;

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'}
  ];
});

＆＃13;

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

＆＃13;

我希望我能正确理解你的问题并解决了它。

角度自举评级系统

1 个答案: