Rendering a Star Rating System using angularjs

Question

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

Answer 1

hmc.starRating.js

angular.module('starRatings',[]).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) {
                console.log(scope.ratingValue);
                function buildStars(){
                  scope.stars = [];
                  for (var i = 0; i < scope.max; i++) {
                      scope.stars.push({
                          filled: i < scope.ratingValue
                      });
                  }
                }
                buildStars();
                scope.$watch('ratingValue',function(oldVal, newVal){
                  if(oldVal !== newVal){
                    buildStars();
                  }
                })
            }
        }
    });



<script src="hmc.starRating.js"></script>


**app.js**
var app = angular.module('app', ['ui.bootstrap', 'starRatings']);


**indix.html**
<div star-rating rating-value="7" max="8" ></div>


    .rating {
        color: #a9a9a9;
        margin: 0 !important;
        padding: 0 !important;
    }
    ul.rating {
        display: inline-block !important;
    }
    .rating li {
        list-style-type: none !important;
        display: inline-block !important;
        padding: 1px !important;
        text-align: center !important;
        font-weight: bold !important;
        cursor: pointer !important;
        width: 13px !important;
        color: #ccc !important;
        font-size: 16px !important;
    }
    .rating .filled {
      color: #ff6131 !important;
      width: 13px !important;
    }