Ashok Kumar Sahoo Ashok Kumar Sahoo - 3 months ago 50
AngularJS Question

Rendering a Star Rating System using angularjs

My app is in this Fiddle
I need to render a star rating system dynamically from a http service, where the current stars and maximum stars can vary with each case.

Is it a good idea to create arrays from

$scope.current
and
$scope.max - $scope.current
and pass them and run
ng-repeat
over them, or there is a more optimised solution than this.
Iteration ng-repeat only X times in AngularJs

Answer

Star Rating can be done either statically or dynamically

enter image description here

If you want just Simply to display Rating as star then try the below one

Static Star Rating

Working Example

html

<body ng-app="starApp">
    <div ng-controller="StarCtrl"> <span ng-repeat="rating in ratings">{{rating.current}} out of
            {{rating.max}}
        <div star-rating rating-value="rating.current" max="rating.max" ></div>
        </span>

    </div>
</body>

script

var starApp = angular.module('starApp', []);

starApp.controller('StarCtrl', ['$scope', function ($scope) {
    $scope.ratings = [{
        current: 5,
        max: 10
    }, {
        current: 3,
        max: 5
    }];
}]);

starApp.directive('starRating', function () {
    return {
        restrict: 'A',
        template: '<ul class="rating">' +
            '<li ng-repeat="star in stars" ng-class="star">' +
            '\u2605' +
            '</li>' +
            '</ul>',
        scope: {
            ratingValue: '=',
            max: '='
        },
        link: function (scope, elem, attrs) {
            scope.stars = [];
            for (var i = 0; i < scope.max; i++) {
                scope.stars.push({
                    filled: i < scope.ratingValue
                });
            }
        }
    }
});

If you want to do Star Rating dynamically try this out

Dynamic Star Rating

Working Demo

Html

<body ng-app="starApp">
    <div ng-controller="StarCtrl"> <span ng-repeat="rating in ratings">{{rating.current}} out of
            {{rating.max}}
        <div star-rating rating-value="rating.current" max="rating.max" on-rating-selected="getSelectedRating(rating)"></div>
        </span>
    </div>
</body>

scipt

var starApp = angular.module('starApp', []);

starApp.controller('StarCtrl', ['$scope', function ($scope) {
    $scope.rating = 0;
    $scope.ratings = [{
        current: 5,
        max: 10
    }, {
        current: 3,
        max: 5
    }];

    $scope.getSelectedRating = function (rating) {
        console.log(rating);
    }
}]);

starApp.directive('starRating', function () {
    return {
        restrict: 'A',
        template: '<ul class="rating">' +
            '<li ng-repeat="star in stars" ng-class="star" ng-click="toggle($index)">' +
            '\u2605' +
            '</li>' +
            '</ul>',
        scope: {
            ratingValue: '=',
            max: '=',
            onRatingSelected: '&'
        },
        link: function (scope, elem, attrs) {

            var updateStars = function () {
                scope.stars = [];
                for (var i = 0; i < scope.max; i++) {
                    scope.stars.push({
                        filled: i < scope.ratingValue
                    });
                }
            };

            scope.toggle = function (index) {
                scope.ratingValue = index + 1;
                scope.onRatingSelected({
                    rating: index + 1
                });
            };

            scope.$watch('ratingValue', function (oldVal, newVal) {
                if (newVal) {
                    updateStars();
                }
            });
        }
    }
});

There is a wonderful tutorial here for more explanation about Angular Star Rating