angularjs – 角js中的自助星评级

发布时间：2020-12-17 17:01:31 所属栏目：安全来源：网络整理

导读：我能够从数据库中获取一个数字并将其显示在.html中 tr ng-repeat="review in reviews " td{{review.reviewer}}/td td{{review.comment}}/td td{{review.rating}}/td 在这里,{{review.rating}}是给定的数字. 我如何使用Bootstrap显示给定数字的星级？解决方

我能够从数据库中获取一个数字并将其显示在.html中

<tr ng-repeat="review in reviews ">
          <td>{{review.reviewer}}</td>
          <td>{{review.comment}}</td>
          <td>{{review.rating}}</td>

在这里,{{review.rating}}是给定的数字.

我如何使用Bootstrap显示给定数字的星级？

解决方法

您可以使用Angularjs Bootstrap UI指令：

https://angular-ui.github.io/bootstrap/

– >评级(ui.bootstrap.rating)

例如：http://plnkr.co/edit/wpfxg0zqSLHPtQVBHdGi?p=preview

的index.html

<div ng-controller="RatingDemoCtrl">
    <h4>Rating</h4>
    <uib-rating ng-model="rate" max="max" read-only="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" titles="['one','two','three']" aria-labelledby="default-rating"></uib-rating>
        <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>

app.js

angular.module('ui.bootstrap.demo',['ngAnimate','ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('RatingDemoCtrl',function ($scope) {
  $scope.rate = 7;
  $scope.max = 10;
  $scope.isReadonly = false;

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

});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!