<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js@*" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="https://code.angularjs.org/1.5.0/angular-animate.min.js"></script>
<script src="https://code.angularjs.org/1.5.0/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.5/angular-material.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.5/angular-material.min.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="jk-rating-stars.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="jk-rating-stars.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MyCtrl" style="padding: 20px" >
<div layout="column">
<h3>Basic</h3>
<jk-rating-stars rating="firstRate" ></jk-rating-stars>
<div style="width: 100px">{{firstRate}} Stars</div>
<h3>10 Stars</h3>
<jk-rating-stars max-rating="10" rating="secondRate" ></jk-rating-stars>
<div style="width: 100px">{{secondRate}} Stars</div>
<h3>Read only</h3>
<jk-rating-stars rating="secondRate" read-only="readOnly" ></jk-rating-stars>
<div style="width: 100px">{{secondRate}} Stars</div>
<h3>With callbacks</h3>
<jk-rating-stars
max-rating="7"
rating="secondRate"
on-rating="onItemRating(rating)">
</jk-rating-stars>
<div style="width: 100px">{{secondRate}} Stars</div>
<h3>With cusomt style</h3>
<jk-rating-stars
class="my-custom-stars"
rating="secondRate" >
</jk-rating-stars>
</div>
</body>
</html>
// Code goes here
angular.module('myApp', ['ngMaterial', 'jkAngularRatingStars'])
.controller('MyCtrl', function($scope) {
$scope.firstRate = 0;
$scope.secondRate = 3;
$scope.readOnly = true;
$scope.onItemRating = function(rating){
alert('On Rating: ' + rating);
};
});
/* Styles go here */
.my-custom-stars .button .material-icons {
font-size: 50px;
}
.my-custom-stars .star-button.star-on .material-icons {
color: #003399;
}
.my-custom-stars .star-button.star-off .material-icons {
color: #99ccff;
}
.jk-rating-stars-container .button{cursor:pointer}.jk-rating-stars-container .button .material-icons{font-size:30px}.jk-rating-stars-container .star-button{text-shadow:.06em .04em #000}.jk-rating-stars-container .star-button.star-on .material-icons{color:#ee9a00}.jk-rating-stars-container .star-button.star-off .material-icons{color:#ddd}
!function(){"use strict";angular.module("jkAngularRatingStars",["jkAngularRatingStars.templates"])}(),function(){"use strict";function RatingStarsController($scope,$attrs,$timeout){var that=this;void 0===that.readOnly&&(that.readOnly=!1),that.initStarsArray=function(){that.starsArray=that.getStarsArray(),that.validateStars()},that.getStarsArray=function(){for(var starsArray=[],index=0;index<that.maxRating;index++){var starItem={index:index,"class":"star-off"};starsArray.push(starItem)}return starsArray},that.setRating=function(rating){that.readOnly||(that.rating=rating,that.validateStars(that.rating),$timeout(function(){that.onRating({rating:that.rating}),$scope.$apply()}))},that.setMouseOverRating=function(rating){that.readOnly||that.validateStars(rating)},that.validateStars=function(rating){if(that.starsArray&&0!==that.starsArray.length)for(var index=0;index<that.starsArray.length;index++){var starItem=that.starsArray[index];rating-1>=index?starItem["class"]="star-on":starItem["class"]="star-off"}}}angular.module("jkAngularRatingStars").controller("RatingStarsController",["$scope","$attrs","$timeout",RatingStarsController])}(),function(){"use strict";function RatingStarsDirective(){function link(scope,element,attrs,ctrl){(!attrs.maxRating||parseInt(attrs.maxRating)<=0)&&(attrs.maxRating="5"),scope.$watch("ctrl.maxRating",function(oldVal,newVal){ctrl.initStarsArray()}),scope.$watch("ctrl.rating",function(oldVal,newVal){ctrl.validateStars(ctrl.rating)})}return{restrict:"E",replace:!0,templateUrl:"rating-stars-directive.html",scope:{},controller:"RatingStarsController",controllerAs:"ctrl",bindToController:{maxRating:"@?",rating:"=?",readOnly:"=?",onRating:"&"},link:link}}angular.module("jkAngularRatingStars").directive("jkRatingStars",[RatingStarsDirective])}(),function(){angular.module("jkAngularRatingStars.templates",[]).run(["$templateCache",function($templateCache){$templateCache.put("rating-stars-directive.html",'<div\n class="jk-rating-stars-container"\n layout="row" >\n\n <a\n class="button"\n ng-click="ctrl.setRating(0)"\n ng-if="!ctrl.readOnly" >\n <i class="material-icons">remove_circle_outline</i>\n </a>\n\n <a\n class="button star-button"\n ng-class="item.class"\n ng-mouseover="ctrl.setMouseOverRating($index + 1)"\n ng-mouseleave="ctrl.setMouseOverRating(ctrl.rating)"\n ng-click="ctrl.setRating($index + 1)"\n ng-repeat="item in ctrl.starsArray" >\n <i class="material-icons">star</i>\n </a>\n\n</div>\n')}])}();