Angularjs Directive that repeats over an array

Question

I have setup the following directive:

app.directive('starRating', function () {
    return {
        restrict: 'EA',
        scope: {
            rating: '=rating'
        },
        template:
            '<ul class=\'list-unstyled\'>' +
                '<li><span class=\'glypicon glyphicon-star\'></span></li>' +
            '</ul>'
    };
});

I then have the following HTML:

<star-rating rating="rating"></star-rating>

rating is an array as such: [1,3,2,4,5] and this implies that the first rating is 1 star, 2nd rating is 3 stars, ect.

The goal of the directive is to repeat the amount of .glyphicon-star icons of the rating.

I referred to this answer to accomplish the requirement without the use of a directive: http://stackoverflow.com/questions/16824853/way-to-ng-repeat-defined-number-of-times-instead-of-repeating-over-array — Flignats, Dec 15 '15 at 22:00
A directive may be useful here since it may be repeated a lot through his app — Ben Taliadoros, Dec 16 '15 at 10:37
use [ngBehavior](https://github.com/maherAshori/ngBehavior#ngrating), this directive can help you — Maher, Dec 16 '15 at 12:36

score 0 · Answer 1 · answered Dec 16 '15 at 10:34

You can use a for loop to concatenate the 'li' elements inside the 'ul' in the template. This is cheaper than using an ng-repeat. You probably dont need to use a list (ul's and li's) at all.

Also your scope can simply be:

 scope: {
        rating: '='
    },

Angularjs Directive that repeats over an array

1 Answers1