角度指令中琐碎但令人困惑的JavaScript

Question

The author of this tutorial describes the following code as such: "every element of stars array has an object with value 'filled' that is evaluated to true or false based on the value of scope.ratingValue that we get 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 a js newbie, I still can't make heads or tails on how to "read" that last line. From the code the only place where filled is mentioned that I can see is the css file and the template here. So there is no bool value that I can see and the syntax is a bit confusing for me. How should i think about it? github code

Answer 1

I checked the source and the template says:

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

When the ng-class directive is given an object, it checks every one of its properties, and if it's truhty, it adds the property name as a classname. Exemple:

ng-class="{filled:true, bold:false}" will evaluate class="filled" .

So this last line sets the 'filled' status of the star, and so the filled class will be put only to the scope.max -nth elements.