AngularJs Star Rate Directive - Snippet for star rating in AngularJs

<!DOCTYPE html>
<html>

  <head>
  <title>AngularJs Star Rating Demo</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
    <link rel="stylesheet" href="style.css">
   
    <script src="https://code.angularjs.org/1.3.0-rc.2/angular.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-app="starApp">
  <div class="col-md-12">
        <div class="row">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="container-fluid">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                            <a class="navbar-brand" href="#">Star Rating AngularJs Snippet</a>
                        </div>
                    </div><!-- /.container-fluid -->
                </nav>
        </div>
    </div>
  <div ng-controller="StarCtrl"> 
    <div class=col-md-12>
        <div ng-repeat="rating in ratings">
        <h2>{{rating.current}} /
            {{rating.max}}</h2>
            <div star-rating rating-value="rating.current" max="rating.max" on-rating-selected="getSelectedRating(rating)"></div>
        </div>
    </div>
    <div class="col-md-12 clear">
      <div class="btn-toolbar" role="toolbar">
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" data-ng-click="setMinrate()">Min Rate</button>
          <button type="button" class="btn btn-default" data-ng-click="setMaxrate()">Max Rate</button>
        </div>
        <div class="btn-group" role="group">
        <button type="button" class="btn btn-primary" data-ng-click="sendRate()">Send</button>
        </div>
    </div>
  </div>
</div>
</body>

</html>

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);
    }
    
    $scope.setMinrate= function(){
       $scope.ratings = [{
        current: 1,
        max: 10
    }, {
        current: 1,
        max: 5
    }];
    }
    
    $scope.setMaxrate= function(){
       $scope.ratings = [{
        current: 10,
        max: 10
    }, {
        current: 5,
        max: 5
    }];
  }
  
  $scope.sendRate = function(){
    alert("Thanks for your rates!\n\nFirst Rate: " + $scope.ratings[0].current+"/"+$scope.ratings[0].max
    +"\n"+"Second rate: "+ $scope.ratings[1].current+"/"+$scope.ratings[0].max)
  }
}]);

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();
                }
            });
        }
    }
});

.rating {
    color: #a9a9a9;
    margin: 0;
    padding: 0;
}
ul.rating {
    display: inline-block;
}
.rating li {
    list-style-type: none;
    display: inline-block;
    padding: 1px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    font-size:20px;
}
.rating .filled {
    color: orangered;
}
.clear{
  margin-top:20px;
}

#AngularJs Star Rate Directive

Author: Giuseppe Pace

Follow me [@giuseppepace89]([https://twitter.com/giuseppepace89)