Star Rating Dctv

by gogirl

HTML

<body ng-app="myApp" ng-init="rating = 3">
     <h5>Show as many stars as the ratings</h5>
Rating is {{rating}}
    <br/>
    <div my-Dctv rating-value="rating"></div>
</body>

JavaScript

angular.module('myApp', [])
    .directive('myDctv', function () {
    return {
        restrict: 'A',
        template: '<ul>' +
            '<li ng-repeat="star in stars">' +
            '\u2605' +
            '</li>' +
            '</ul>',
        scope: {
            // create isolate scopes for reusable app components only
            // only for variables that need to passed in from the HTML
            ratingValue: '=' //value mutable
        },
        link: function (scope, elem, attrs) {
            scope.stars = [];
            //push objects inside the stars array. Here 1.
            for (var i = 0; i < scope.ratingValue; i++) {
                scope.stars.push({});
            }
        }
    }
});