star rating directive

Author: Ferie

app/directives/star-rating.js

@@ -0,0 +1,60 @@
+/**
+ * Star Rating Directive
+ * 
+ * @memberOf riccardo
+ * @description
+ * Directive that is managing a rating feature.
+ */
+
+(function () {
+    'use strict';
+
+    angular.module('riccardo').directive('starRating', starRating);
+
+    function starRating() {
+        return {
+            restrict: 'EA',
+            template:
+                '<ul class="star-rating" ng-class="{readonly: readonly}">' +
+                '   <li ng-repeat="star in stars" class="star" ng-class="{filled: star.filled}" ng-click="toggle($index)">' +
+                '       &#9733' +
+                '   </li>' +
+                '</ul>',
+            scope: {
+                ratingValue: '=ngModel',
+                max: '=?', // optional (default is 5)
+                onRatingSelect: '&?',
+                readonly: '=?'
+            },
+            link: function (scope, element, attributes) {
+                if (scope.max == undefined) {
+                    scope.max = 5;
+                }
+
+                function updateStars() {
+                    scope.stars = [];
+                    for (var i = 0; i < scope.max; i++) {
+                        scope.stars.push({
+                            filled: i < scope.ratingValue
+                        });
+                    }
+                }
+
+                scope.toggle = function (index) {
+                    if (scope.readonly == undefined || scope.readonly === false) {
+                        scope.ratingValue = index + 1;
+                        scope.onRatingSelect({
+                            rating: index + 1
+                        });
+                    }
+                };
+
+                scope.$watch('ratingValue', function (oldValue, newValue) {
+                    if (newValue || newValue === 0) {
+                        updateStars();
+                    }
+                });
+            }
+        };
+    }
+})();

assets/sass/components/_rating.scss

@@ -0,0 +1,25 @@
+// Star Rating System
+
+.star-rating {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+
+    > .star {
+        display: inline-block;
+        font-size: rem(28);
+        color: $greyDD;
+        cursor: pointer;
+        text-shadow: rem(1) rem(1) $greyAA;
+        list-style-type: none;
+        padding: 1px;
+
+        &.filled {
+            color: $yellow;
+        }
+    }
+
+    &.readonly .star.filled {
+        color: $yellow;
+    }
+}