Trivial but confusing javascript in angular directive

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

I think there might be a typo here: class should something along the lines of ng-class="{filled:filled}" — BiAiB
– BiAiB, Commented Feb 19, 2014 at 22:21

BiAiB · Accepted Answer · 2014-02-19 22:25:47Z

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.

answered Feb 19, 2014 at 22:25

BiAiB

14.4k11 gold badges47 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Trivial but confusing javascript in angular directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related