In this article we are going to see how to create a Star Rating control in the HTML as Element or as Attribute using the Angular js. To do this we are going to take create the Directive in Angular js, First Let we see what kind of element or Attribute we are going to create and what kind of output it will give ?
Below Code Snippet is we trying to do
Output:
From the Code we can render a Star Control, using the some of the properties it will have some behavior change.
custom-rating is the act as element or attribute for render a star control, it have few options
readonly : set true for this attribute if you want the star control as readonly
max : set the number of star you want to render
star-size : size of the star control
rating-value : specify the rating value of a control
on event is there to trigger for the change in the star value when user clicked, then use the
on-rating-changed with a function passing parameter in the name of rating , which consists the value, now you can trigger the value to the server.
Now we start to build the directive.
Add the following jquery in the HTML.
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
Create a Module and controller
First step is create a module in separate js file and include in the HTML.
var myApp = angular.module('myApp', []);
myApp.controller('BlogController', function ($scope, $window) {
$scope.sample = 'Blog Testing';
$scope.rating = 5;
$scope.rating2 = 1;
$scope.saveRating = function (rating) {
console.log('Rating selected ' + rating);
};
$scope.Sample = function (rating) {
console.log('sample ' + rating);
};
});
myApp.directive('customRating', function () {
return {
restrict: 'AE',
template: '<ul class="rating">' +
'<li ng-repeat="star in stars" ng-class="star" ng- click="toggle($index)">\u2605</li>' +
'</ul>',
scope:
{
ratingValue: '=',
max: '=',
readonly: '@',
starSize: '=',
onRatingChanged: '&'
},
link: function (scope, element, attrs) {
var updateStars = function () {
scope.stars = [];
for (var i = 0; i < scope.max; i++) {
scope.stars.push({ filled: i < scope.ratingValue });
}
};
element.css('font-size', scope.starSize);
scope.toggle = function (index) {
if (scope.readonly && scope.readonly === 'true') {
return;
}
scope.ratingValue = index + 1;
scope.onRatingChanged({ rating: index + 1 });
};
scope.$watch('ratingValue', function (oldval, newval) {
if (newval) {
updateStars();
}
})
}
}
});
So now when include the custom js in the Html, we can able to render the Star control .Now when ever user change the value in one star it affects others because of binding, at the same time we are trigger the changes to the server.
From this article you can learn how to render a star control tag in Html using Angular Js.
