ng-rating

Angular directive to display "stars" (or something else) based ratings

Get Started

First, you need to include the scripts and css in your page

<link href="ng-rating.css" rel="styletheet" type="text/css" /> <!-- optional font-awesome to have access to icons --> <link href="font-awesome.css" rel="styletheet" type="text/css" />  <script src="angular.js"></script> <script src="ng-rating.js"></script>

Then you have to specify the "ngRating" module as dependency of your angular app

var myApp = angular.module('myAwesomeApp', ['ngRating']);

Finaly you can use the ng-rating directive to display ratings like so

<ng-rating ng-model="hotel.rating"></ng-rating>

See the index.html file for full sample

Attributes

The directive accept different attributes :

• ng-model : REQUIRED : specify the actual rating value
• start-count : the number of stars to display (default : 5)
• based-on : the value on witch the calculation will be made. 5 stars based on 100 mean 1 active star = 20, etc...
• editable : specify if the user can change the rating by clicking on the stars
• icon-class : specify the class that will specify with icon to display for each stars (by default : fa fa-star)
• show-grade : specify if the grade (rating number) is displayed or not after the stars

Classes

These are the diferent classes that are applied

• ng-rating : The container
  • ng-rating--xlow : Applied on the container when the rating level is extra-low
  • ng-rating--low : Applied on the container when the rating level is low
  • ng-rating--medium : Applied on the container when the rating level is medium
  • ng-rating--high : Applied on the container when the rating level is high
  • ng-rating--xhigh : Applied on the container when the rating level is exta-high
  • ng-rating--editable : Applied on the container when the rating is editable
• ng-rating-group : The group of stars
  • ng-rating-group--hover : The group of stars that will be active (the width of this element will be set by the directive)
• ng-rating-star : The star that contain a "i" tag
  • ng-rating-star--active : Applies on the stars that are active