angular-rateit
This directive was inspired by the jQuery (star)rating plugin RateIt. However this package will work without jQuery and is very light weight.
Getting Started
You can install an angular-rateit package easily using Bower:
bower install angular-rateit
And add the files to your index page:
Finally add 'ngRateIt' to your main module's list of dependencies:
angular;
How to use
To get it working simply add this block of code to your view:
N.B. When using angular 1.2.* use <div ng-rate-it ng-model="test.rateit"></div>
For more advanced functionality you can add a couple attributes:
Attributes
Attribute | Description | Value | Default |
---|---|---|---|
ng-model | Object bound to control. (Required) | String, Number, Array | - |
min | Minimal value. | Double | 0 |
max | Maximal value. The difference between min and max will provide the number of stars. | Double | 5 |
step | Step size. | Double | 0.5 |
read-only | Whether or not is readonly. | Boolean | false |
pristine | Whether or not the current value is the initial value. | Boolean | true |
resetable | When not readonly, whether to show the reset button. | Boolean | true |
star-width | Width of the star picture. | Integer | 16 |
star-height | Height of the star picture. | Integer | 16 |
cancel-width | Width of the cancel icon. | Integer | star-width |
cancel-height | Height of the cancel icon. | Integer | star-height |
rated | Fired when a rating happened. (Obtain the rated value by the model) | Function | - |
reset | Fired when the reset button was clicked. | Function | - |
before-rated | Fired before the item is actually rated. By rejecting the promise it is possible to cancel the rating. | Function: return promise | - |
before-reset | Fired before the item is actually reset. By rejecting the promise it is possible to cancel the reset. | Function: return promise | - |
Customization
You can easily add your own star style via css. You can use the star-width and star-height attributes to make the 'stars' bigger if necessary.
Release Note:
V4.0.0
- BREAKING: The callback function binding has changed form two-way to method binding. This will allow you to pass your own variables to the callback function AND the current rating is passed in the
rating
parameter:
$scope { console;}
To upgrade from v3 to v4, just add ()
after your function name.
V3.0.0
- BREAKING: The
over
callback is removed. - BREAKING: If you're using your own template, you need to update it.
- Template and CSS file are refactored in order to support mobile divices.
- Moved calculations from template to controller.