Angular Star Rating Directive – In this post I am going to share An angular directive for rating which you can apply on any product and service on your web app so that your website user can rate your product and services. angular-star-rating is quick to integrate star rating plugin in angular and easy to customize.
angular-star-rating

Libraries

Decorating the rating-star by css file main.css, your can define yourself.

<link rel="stylesheet" href="../dist/main.css">

Adding dependency to your project

ngular.module('your-module-name', ['angular-star-rating']);

HTML

<div ng-controller='myCtrl'>
     <h2>Demo</h3>
    <div>
        <div>
            <angular-star-rating max="maxValue" value='ratingValue'  hover='changeOnHover' is-readonly='isReadonly'></angular-star-rating>
        </div>
        <div>
            Readonly:
                <input type='checkbox' ng-model='isReadonly' /> {{isReadonly}}
 
            Rating value change on mouse hover: 
                <input type='checkbox' ng-model='changeOnHover' /> {{changeOnHover}}
 
            Your rating value: {{ratingValue}} / {{maxValue}}
            Max value: 
                <input ng-model="maxValue" type="number" min="5" max="100"> (5~100 for test)
 
        </div>
    </div>
</div>

Below are the parameters supported.

  • maxValue
  • ratingValue
  • isReadonly
  • changeOnHover

CSS

.fa-star-o {
    color: #FF7700;
}
.fa-star {
    color: #FFDD00;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #FF7700;
}
.isReadonly {
    .fa-star-o {
        color: #000000;
    }
    .fa-star {
        color: #DCDCDC;
        -webkit-text-stroke-width: 2px;
        -webkit-text-stroke-color: #000000;
    }
}


JS

angular.module('angular-star-rating', [])
    .directive('angularStarRating', angularStarRating);
var app = angular.module('myApp', ['angular-star-rating']);
 
function myCtrl($scope) {
    $scope.isReadonly = false; // default test value
    $scope.changeOnHover = false; // default test value 
    $scope.maxValue = 10; // default test value
    $scope.ratingValue = 5; // default test value
}
 
 
function angularStarRating() {
    var directive = {
 
        restrict: 'EA',
        scope: {
            'value': '=value',
                'max': '=max',
                'hover': '=hover',
                'isReadonly': '=isReadonly'
        },
        link: linkFunc,
        template:
            '<span ng-class="{isReadonly: isReadonly}">' +
            '<i ng-class="renderObj" ' +
            'ng-repeat="renderObj in renderAry" ' +
            'ng-click="setValue($index)" ' +
            'ng-mouseenter="changeValue($index, changeOnHover )" >' +
            '</i>' +
            '</span>',
        replace: true
    };
    return directive;
}
 
function linkFunc(scope, element, attrs, ctrl) {
    if (scope.max === undefined) scope.max = 5; // default
    console.log(scope.test);
 
    function renderValue() {
        scope.renderAry = [];
        for (var i = 0; i < scope.max; i++) {
            if (i < scope.value) {
                scope.renderAry.push({
                    'fa fa-star fa-2x': true
                });
            } else {
                scope.renderAry.push({
                    'fa fa-star-o fa-2x': true
                });
            }
        }
    }
 
    scope.setValue = function (index) {
        if (!scope.isReadonly && scope.isReadonly !== undefined) {
            scope.value = index + 1;
        }
    };
 
    scope.changeValue = function (index) {
        if (scope.hover) {
            scope.setValue(index);
        } else {
            // !scope.changeOnhover && scope.changeOnhover != undefined
        }
    };
 
    scope.$watch('value', function (newValue, oldValue) {
        if (newValue) {
            renderValue();
        }
    });
    scope.$watch('max', function (newValue, oldValue) {
        if (newValue) {
            renderValue();
        }
    });
 
}

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by northwalker, Visit their official github repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.