In the tutorial, the author explains that each element in the stars array contains an object with a 'filled' value, which is determined as true or false based on the scope.ratingValue received from the DOM.
directive('fundooRating', function () {
return {
restrict: 'A',
template: '<ul class="rating">' +
'<li ng-repeat="star in stars" class="filled">' +
'\u2605' +
'</li>' +
'</ul>',
scope: {
ratingValue: '='
},
link: function (scope, elem, attrs) {
scope.stars = [];
for(var i = 0; i < scope.max; i++) {
scope.stars.push({filled: i < scope.ratingValue});
}
}
As someone new to JavaScript, understanding the last line of code can be challenging. The term 'filled' only appears in the CSS file and the provided template, making it difficult to comprehend the boolean value behind it. The syntax may seem confusing at first glance. If you are facing similar difficulties, check out the GitHub code for more insights.