Skip to content
master
Switch branches/tags
Code
This branch is 7 commits ahead of whitef0x0:master.
Contribute

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

Welcome

With this directive you can build rating inputs easily.

Look! A demo!

Installation via bower

	bower install angular-input-stars

Inject it

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

Use

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

You can customize the base, empty, hover, and full and icon classes via attributes

	<input-stars max="5" icon-base="fa fa-fw" icon-empty="fa-circle-o" icon-hover="hover" icon-full="fa-circle" 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 : ]

You can add a $rootScope function that will be called each time after a star is clicked by using the optional onStarClick attribute when the onShapeClick attribute is set to true

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

You can customize the list class to whatever you want

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

You can 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>

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

About

Create rating inputs easily

Resources

Packages

No packages published