самозагрузки звезда рейтинг в угловых JS

Question

Я могу получить номер из базы данных и отобразить его в .html, как

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

здесь, {{}} review.rating заданное число.

Как я могу использовать Bootstrap для отображения рейтинга звезды для данного номера?

Answer 1

вы можете использовать директиву 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> 

приложение.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); 
    }; 

});