This directive was inspired by the jQuery (star)rating plugin RateIt. However this package will work without jQuery and is super light weight: 3.3 Kb minified 1.9 Kb.
You can install an angular-rateit package very easily using Bower:
bower install angular-rateit
Or add the files manually to your index file:
<link rel="stylesheet" href="angular-rateit/dist/rateit.css" />
<script src="angular-rateit/dist/rateit.js"></script>
Finally add 'ngRateIt' to your main module's list of dependencies:
angular.module('myApp', [
...
'ngRateIt',
...
]);
To get it working simply add this block of code to your view:
<ng-rate-it ng-model="test.rateit"></ng-rate-it>
For more advanced functionality you can add a couple attributes:
<ng-rate-it
ng-model = "String, Number, Array"
min = "Double"
max = "Double"
step = "Double"
read-only = "Boolean"
pristine = "Boolean"
resetable = "Boolean"
star-width = "Integer"
star-height = "Integer"
rated = "Function"
reset = "Function"
over = "Function"
before-rated = "Function: return promise"
before-reset = "Function: return promise"
>
</ng-rate-it>
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 |
rated | Fired when a rating happened. (Obtain the rated value by the model) | Function | - |
reset | Fired when the reset button was clicked. | Function | - |
over | Fired when hovering over the element. First function parameter is the event, second parameter will contain the hover rating value. | 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 | - |
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.
<style>
.custom .ngrateit-background,
.custom .ngrateit-hover,
.custom .ngrateit-value{
background-image: url('custom.png');
}
</style>
<ng-rate-it ng-model="model.custom" class="custom"></ng-rate-it>