Skip to content

Angular directive to display stars based ratings

License

Notifications You must be signed in to change notification settings

baizhou/ng-rating

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

Angular directive to display stars based ratings

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • CoffeeScript 34.9%
  • JavaScript 25.6%
  • CSS 21.6%
  • HTML 17.9%