Design Code for Rating
  1. <div ng-controller="RatingDemoCtrl" ng-app="demo" >
  2. <h4>Rating percentage With Color</h4>
  3. <rating ng-model="rate" max="max" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null"></rating>
  4. <span class="label" ng-class="{'label-warning': percent
  5. <30, 'label-info': percent>=30 && percent
  6. <70, 'label-success': percent>=70}" ng-show="overStar && !isReadonly">{{percent}}%
  7. </span>
  8. <h4>Rating Out of 10</h4>
  9. <div ng-init="x = 4">
  10. <rating ng-model="x" max="10" state-on="'glyphicon-ok-sign'" state-off="'glyphicon-ok-circle'"></rating>
  11. <b>(
  12. <i>Rate:</i> {{x}})
  13. </b>
  14. </div>
  15. </div>
Rating percentage with effect
Angularjs Code for Rating
  1. angular.module('demo', ['ui.bootstrap']);
  2. angular.module('demo').controller('RatingDemoCtrl', function($scope) {
  3. $scope.rate = 7;
  4. $scope.max = 10;
  5. $scope.isReadonly = false;
  7. $scope.hoveringOver = function(value) {
  8. $scope.overStar = value;
  9. $scope.percent = 100 * (value / $scope.max);
  10. };
  11. $scope.ratingStates = [{
  12. stateOn: 'glyphicon-ok-sign',
  13. stateOff: 'glyphicon-ok-circle'
  14. }, {
  15. stateOn: 'glyphicon-star',
  16. stateOff: 'glyphicon-star-empty'
  17. }, {
  18. stateOn: 'glyphicon-heart',
  19. stateOff: 'glyphicon-ban-circle'
  20. }, {
  21. stateOn: 'glyphicon-heart'
  22. }, {
  23. stateOff: 'glyphicon-off'
  24. }];
  25. });
Thank You