ratting directive finished

karanjilka · karanjilka · commit 9562b264ae29 · 2014-11-30T19:14:17.000+05:30
diff --git a/directives/ratting/js/rating.js b/directives/ratting/js/rating.js
@@ -1,18 +1,45 @@
 (function() {
-    var app = angular.module("rateApp",[]);
-
+    var app = angular.module("rateApp", []);
+    app.controller('ratingCrtl',['$scope','$window',
+        function($scope,$window){
+            $scope.rating = 5;
+            $scope.onRating = function(rating){
+                console.log(rating);
+            };
+        }
+    ]);
     app.directive('rating', function() {
         return {
             restrict: 'A',
-            templateUrl:'rate-template.html',
-            scope:{
-            	max:'='
+            templateUrl: 'rate-template.html',
+            scope: {
+                max: '=',
+                readonly: '@',
+                ratingValue: '=',
+                onRating: '&',
             },
             link: function(scope, elem, attrs) {
-            	scope.stars = [];
-            	for(var i=0;i < scope.max; i++){
-            		scope.stars.push({});
-            	}
+
+                var updateStars = function() {
+                    scope.stars = [];
+                    for (var i = 0; i < scope.max; i++) {
+                        scope.stars.push({filled: i < scope.ratingValue});
+                    }
+                };
+
+                scope.toggle = function(index) {
+                    if (scope.readonly && scope.readonly === 'true') {
+                        return;
+                    }
+                    scope.ratingValue = index + 1;
+                    scope.onRating();
+                };
+
+                scope.$watch('ratingValue', function(oldVal, newVal) {
+                    if (newVal) {
+                        updateStars();
+                    }
+                });
             }
         };
     });
diff --git a/directives/ratting/rate-template.html b/directives/ratting/rate-template.html
@@ -1,5 +1,5 @@
 <ul class="rating">
-  <li ng-repeat="star in stars" class="filled">
+  <li ng-repeat="star in stars" ng-class="star" ng-click="toggle($index)">
   	&#9733;
   </li>
 </ul>
diff --git a/directives/ratting/rating.html b/directives/ratting/rating.html
@@ -4,11 +4,32 @@
         <title>Test</title>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
+        <style>
+        .rating{
+            color: #a9a9a9;
+            margin: 0;
+            padding: 0;
+        }
+        ul.rating {
+            display: inline-block;
+        }
+        .rating li {
+            list-style-type: none;
+            display: inline-block;
+            padding: 1px;
+            text-align: center;
+            font-weight: bold;
+            cursor: pointer;
+        }
+        .rating .filled {
+            color: #21568b;
+        }
+        </style>
     </head>
     <body>
-        <div ng-app="rateApp">
-            <div rating max="10"></div>
+        <div ng-app="rateApp" ng-controller="ratingCrtl">
+            Current Rating : {{rating}} <br>
+            <div rating rating-value="rating" max="10" on-rating="onRating(rating)"></div>
         </div>
         <!-- Scripts -->
         <script src="js/plugin/jquery.min.js"></script>
