angular star rating directive with no star filled - angularjs

Question

How do I modify the angular star rating directive to display no star filled (by default) on load?
Following is the directive for the same:
responseController.directive('starRating', function(){
return {
restrict: 'EA',
template:
'<ul class="star-rating" ng-class="{readonly: readonly}">' +
' <li ng-repeat="star in stars" class="star" ng-class="{filled: star.filled}" ng-click="toggle($index)">' +
' <i class="fa fa-star"></i>' +
' </li>' +
'</ul>',
scope: {
ratingValue: '=ngModel',
max: '=?',
onRatingSelect: '&?',
readonly: '=?'
},
link: function(scope, element, attributes) {
if (scope.max == undefined) {
scope.max = 5;
}
function updateStars() {
scope.stars = [];
for (var i = 0; i < scope.max; i++) {
scope.stars.push({
filled: i < scope.ratingValue
});
}
};
scope.toggle = function(index) {
if (scope.readonly == undefined || scope.readonly === false) {
scope.ratingValue = index + 1;
}
};
scope.$watch('ratingValue', function(oldValue, newValue) {
if (newValue) {
updateStars();
}
});
}
};
});

Answer 1

You can add updateStars(); before $scope.watch(...). It will render not filled stars. Afterwards if the value of ratingValue is not undefined, the watcher will update stars.

Answer 2

app.directive('starRating', function () {
return {
//This template is used to display the star UX in repeated form.
template: '<ul class="starRating">' + '<li ng-repeat="star in stars" ng-class="star" ng-click="toggleFunck($index)">' + '\u2605' + '</li>' + '</ul>',
scope: {
ratingValue: '= ',
max: '=',
onStarRating: '&'
},
link: function (scope, elem, attrs) {
//This method is used to update the rating run time.
var updateRating = function () {
//This is global level collection.
scope.stars = [];
//Loop called with the help of data-max directive input and push the stars count.
for (var i = 0; i < scope.max; i++) {
scope.stars.push({
filled: i < scope.ratingValue
});
}
};
//This is used to toggle the rating stars.
scope.toggleFunck = function (index) {
alert(index);
//This is used to count the default start rating and sum the number of input index.
scope.ratingValue = index + 1;
scope.onStarRating({
rating: index + 1
});
};
updateRating();
//This is used to watch activity on scope, if any changes on star rating is call automatically and update the stars.
scope.$watch('ratingValue',
function (newV, oldV) {
if (newV) {
updateRating();
}
}
);
}
};
}
);