melloc01 / angular-input-stars

Create rating inputs easily

Welcome

With this directive you can build rating inputs easily.

Installation via bower

bower install angular-input-stars

Inject it

angular.module('app', ['angular-input-stars'])

Use

Simple usage

<input-stars max="5" ng-model="YourCtrl.property"></input-stars>

Customize the base, empty, hover, half and full and icon classes via attributes

<input-stars
    max="5"
    allow-half
    icon-base="fa fa-fw"
    icon-empty="fa-star-o"
    icon-half="fa-star-half-o"
    icon-full="fa-star" 
    icon-hover-full="fa-star" 
    ng-model="YourCtrl.property"
    ></input-stars>

Unlike icon-base, on icon-full, icon-hover and icon-empty you must specify only one class, but that is all you need : ]

Customize or initalize the directive attributes using the ng-attr-{attr} directive thanks to timkishkin for pointing the need of a better clarification

<input-stars 
    ng-model="App.prop1" 
    max="5"
    ng-attr-readonly="{{ enableReadonly || false }}" 
    ng-attr-icon-empty="{{ enableReadonly ? 'fa-twitter' : 'fa-circle-o' }}"
    ng-attr-icon-full="{{ enableReadonly ? 'fa-cog' : 'fa-twitter' }}"
></input-stars> value: {{App.prop1}}

Add a $rootScope function that will be called each time after a star is clicked by using the optional onStarClick attribute (thanks to @whitef0x0)

<input-stars max="5" on-star-click="runMyFunction()" ng-model="YourCtrl.property"></input-stars>

Customize the list class to whatever you want

<input-stars max="5" list-class="shiny-list" ng-model="YourCtrl.property"></input-stars>

Make it readonly, thanks to @anjorinjnr

<input-stars max="10" list-class="shiny-list" ng-model="YourCtrl.property" readonly ></input-stars>
<input-stars max="10" list-class="shiny-list" ng-model="YourCtrl.property" readonly="true" ></input-stars>
<input-stars max="10" list-class="shiny-list" ng-model="YourCtrl.property" readonly="readonly" ></input-stars>

Allow it to have half-icon painted, thanks to @brunoksato

<input-stars max="10" list-class="shiny-list" ng-model="YourCtrl.property" allow-half ></input-stars>

The .css file is optional and it is a bootstrap for customizations.

Dependencies

This directive uses FontAwesome as fallback if you don't specify any icon class.

License

MIT License © Rafael Mello Campanari

angular-input-stars's Issues

Release

Just like #7, please.

I'm currently relying on @miguepiscy's fork...

Release

Hi,

Could you please tag the latest version, you have on master.

thanks!

Stars are not showing in Ionic mobile app.

Hello Team,

Use own module

Please, use separate module, something like angular-input-star because not each project have app module.

Use attributes to paint instead of getBoundingRect

Prevents cross-browser issues

Google material design icons issue!!!

How to use only material design icons...

Can't get "on-star-click" working

Tried your example and function set in on-star-click attribute is not called. Is it working properly? Thanks.

How to using required in angular-input stars

Stars

I have tried to use 'data-required' but its not working.

Styling doesnt seem to be being applied.

Implemented the directive based on the read me file. and all im seeing is a vertical line of list item dots. Im not getting any errors from the console log so im at a loss for what is causing the css to not be shown.

How to set 0 on min starts

Hi,
do you have an set min to 0?

Unexpected behavior on break line

Althought I see this break line as a front-end bug issue - why would a rating input be occuping to lines - there should be a better approach than rect.left

Fraction rates

Hey guyz, I have a situation where i need to display a fraction rating, say 2.85. I'm thinking i can round the fractions to the nearest quatiles so i can have full, quarter, half and three-quarter stars. Any help? I could have made a pr for that but unfortunately I'm running out of time for my project

Half Circle or Half Star

How can we handle half icon like "fa fa-star-half" ?

Input Stars with ng-message

Hello,

How can we used ng-message to validate a form with this directive ?

Max value from scope doesn't work

I'm trying to assign a dynamic value to max property using a scope var and it's not working.
Example:
Controller:
$scope.userRating=2;
$scope.maxRating=8;

View:

Upgrade Angular dependency

I cannot do bower install because angular dependency. Mine is 1.5.

property readonly doesn't work

<input-stars readonly="true" max="5" icon-full="mdi-star" icon-base="mdi" icon-empty="mdi-star-outline" ng-model="cmt.businessModelScore"></input-stars>

that's my code,but the stars can be still changed
it's that a problem or my mistake?
thanks

bower - cannot find main

Hi,

I think there was a change to the master which has created an issue. The file name of the JS needs to change in the bower.json.

thanks
Jarryd

ngModel doesn't work unless controller is set 'as' something

Unless I do ng-controller="Controller as Ctrl" and then use it on the input as ng-model="Ctrl.myModel" it doesn't work.

I've tested it with ng-model="myModel" and the data seems to be one way only, not bi-directional. I've tested running your directive in a jsfiddle you can view here and it simply does not run.

A possible fix for this is to add into the scope the following to the directive variable:
scope: { ngModel: '='}