Rating stars in angular js using directive

Here I am going to explain how to create rating feature using angular js directive concept and send the rating value to backend ( service ). I have explained same using Angular 2(+) concept as well, if you want to compare both implementation check this link as well.

Refer this link to know how it is implemented in Angular 2(+):- Rating star component using Angular 2(+).

Angular js 1 Directive

---

 
angular.module('samplemodule').directive('starRating',
function() {
return {
restrict : 'A',
template : '<ul class="rating">'
   + ' <li ng-repeat="star in stars" 
   ng-class="star" ng-click="toggle($index)">'
   + '  <i class="fa fa-star-o"></i>'
   + ' </li>'
   + '</ul>',
scope : {
 ratingValue : '=',
 max : '=',
 onRatingSelected : '&'
},
link : function(scope, elem, attrs) {
 var updateStars = function() {
  scope.stars = [];
  for ( var i = 0; i < scope.max; i++) {
   scope.stars.push({
    filled : i < scope.ratingValue
   });
  }
 };
 
 scope.toggle = function(index) {
  scope.ratingValue = index + 1;
  scope.onRatingSelected({
   rating : index + 1
  });
 };
 
 scope.$watch('ratingValue',
  function(oldVal, newVal) {
   if (newVal) {
    updateStars();
   }
  }
 );
}
};
}
);

Here i used Font awesome icon ( <i class="fa fa-star-o"></i> ).Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
Font awsome icons
You can improve the performance of your site by using font awesome images.

View

 
 
<div ng-init="rating = star.rating + 1"></div>

<div class="star-rating" star-rating rating-value="rating"

 data-max="10" on-rating-selected="rateFunction(rating)"></div>
 

Only for displaying the rating you can use the class as star-rating.Here i am going to explain how to send this rating to backend (Service).

Controller

 
    
$scope.rateFunction = function( rating )
{
       var _url = 'your service url';
 
 var data = {
   rating: rating
 };
 
 $http.post( _url, angular.toJson(data), {cache: false} )
  .success( function( data )
  {
   success(data);
  })
  .error(function(data){
    error(data);
  });
 
};
 
 

CSS

Using this "filled" class we are changing the color of the rated stars .

 

.rating .filled {
color: #21568b;
}

Demo

Play in fiddle

Directives are markers on a DOM element that tell AngularJS's HTML compiler to attach a specified behavior to that DOM element or even transform the DOM element and its children. Better define all Global controllers in Directives. Ex: Warning message, alert etc.

'A' - Attribute (Use it as <div starrating>)

'E' - Element (Use it as <starrating>)

'C' - Class. (Use it as <div class="starrating">)

'M' - Comment (Use it as <!- directive: starrating -> )

We used watch concept in directive .Watch is a powerful feature of angular js. “$watch” concept in Angular is to observe the changes on the data of the scope from the controller. That is controller can add a listener on an attribute of its scope.

Related Posts

1. Communicate with controllers in angular js

2. Angular routing

3. Loop concept in angular js

4. Filtering concept in angular js

5. Save highchart as binary image