我能够从数据库中获取一个数字并将其显示在.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); }; });