Design Code for Rating
- <div ng-controller="RatingDemoCtrl" ng-app="demo" >
- <h4>Rating percentage With Color</h4>
- <rating ng-model="rate" max="max" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null"></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>
- <h4>Rating Out of 10</h4>
- <div ng-init="x = 4">
- <rating ng-model="x" max="10" state-on="'glyphicon-ok-sign'" state-off="'glyphicon-ok-circle'"></rating>
- <b>(
- <i>Rate:</i> {{x}})
- </b>
- </div>
- </div>
Rating percentage with effect
Angularjs Code for Rating
- angular.module('demo', ['ui.bootstrap']);
- angular.module('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);
- };
- $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'
- }];
- });
Thank You