Rating directive

Basic usage

<ngx-rating level="ratingLevel"></ngx-rating>

Custom symbol and clearable rating

<ngx-rating level="ratingLevel2" symbol="$" clearable></ngx-rating>

Read only rating with changed number of „stars“

<ngx-rating level="ratingLevel3" max="10" read-only></ngx-rating>

Change clear text

<ngx-rating level="ratingLevel4" clearable clear-text="Your text"></ngx-rating>

Custom image with changeOnHover enabled

<style>
    .ngx-ui-rating-image li {
        background: url('images/stars_18x18.png') 0 -18px no-repeat;
        padding: 0;
        width: 18px;
        height: 18px;
    }
    .ngx-ui-rating-image li.ngx-rating-selected,
    .ngx-ui-rating-image li.ngx-rating-hover {
        background-position: 0 0;
    }
</style>
<ngx-rating level="ratingLevel5" symbol="" change-on-hover></ngx-rating>

Watch level changes

// in controller
$scope.ratingLevel6 = 3;
$scope.$watch('ratingLevel6', function (level) {
    // do your stuff
});
<ngx-rating level="ratingLevel6" clearable></ngx-rating>