Тривиальный, но запутанный javascript в угловой директиве

Question

Автор this tutorial описывает следующий код: «каждый элемент массива звезд имеет объект со значением« заполненный », который оценивается как true или false на основе значения scope.ratingValue что мы получаем от 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}); 
    } 
} 

Как новичок js, я все еще не могу сделать головы или хвосты о том, как «читать» эту последнюю строку. Из кода упоминается только место, где я записал, это файл css и шаблон здесь. Поэтому нет значения bool, которое я могу видеть, и синтаксис для меня немного запутан. Как я должен думать об этом? github code

Answer 1

Я проверил источник и шаблон говорит:

'<li ng-repeat="star in stars" ng-class="star" ng-click="toggle($index)">' 

Когда директива ng-class дается объект, он проверяет каждый из его свойств, и если это truhty, он добавляет имя свойства, как имя_класс. Пример:

ng-class="{filled:true, bold:false}" будет оценивать class="filled".

Таким образом, эта последняя строка устанавливает «заполненный» статус звезды, поэтому заполненный класс будет помещен только в scope.max -nth элементов.