UPD: Angular2 star rating app added.
Need to show a Stars (or other graphic items) rating with floating numbers (like to show 2.5
stars or 3.75
circles)?
Use this AngularJS
directive! :-)
In a file stars.html
you'll find a working example of using AngularJS
and canvas
awesomeness. With said directive you can:
- Define the stars size -- attribute
star-radius
; - Stipulate how many stars you want to display -- attribute
stars
; - You can define the color of the 'empty star' with attribute
empty-back-color
, background color of the stars wrapper --back-color
and the background color of the selected stars --sel-color
; - Also you can use a two ways to define how many stars will be selected: by defining a 'fill percent' approach --
rating-percent
attribute, or with 'stars number' --rating-stars
(you can use here float numbers, for example you can select3.5
stars). - Do not like stars? Prefer circles? Provide your own function to draw the rating element you want via
custom-figure-drawer
attribute.
Wishing to change the rating live?
- You can use the
rating-define
attribute to make the directive to change the rating, depending on mouse moves (percent
value by percent andstar
value to change by full star). Theclick
will "secure" the new rating.
N.B.
If you want to use several ratings on one page, please wrap each of them into separate controller
or isolate them other way in order not to interfere each other...