Geek Answers Handbook

Display star rating system using angularjs

My application is in this Fiddle. I need to dynamically display the star rating system from the http service, where the current stars and maximum stars can vary in each case.

It is a good idea to create arrays from $scope.current and $scope.max - $scope.current and skip them and run ng-repeat over them, or is there a more optimized solution than this. Iterate ng-repeat only X times in AngularJs

+7
javascript angularjs
source share
7 answers

Star rating can be done either statically (read-only) or dynamically

enter image description here

If you want to just show the rating as a star, try using below

Static Star Rating

Working example

HTML

 <body ng-app="starApp"> <div ng-controller="StarCtrl"> <span ng-repeat="rating in ratings">{{rating.current}} out of {{rating.max}} <div star-rating rating-value="rating.current" max="rating.max" ></div> </span> </div> </body>

script

 var starApp = angular.module('starApp', []); starApp.controller('StarCtrl', ['$scope', function ($scope) { $scope.ratings = [{ current: 5, max: 10 }, { current: 3, max: 5 }]; }]); starApp.directive('starRating', function () { return { restrict: 'A', template: '<ul class="rating">' + '<li ng-repeat="star in stars" ng-class="star">' + '\u2605' + '</li>' + '</ul>', scope: { ratingValue: '=', max: '=' }, link: function (scope, elem, attrs) { scope.stars = []; for (var i = 0; i < scope.max; i++) { scope.stars.push({ filled: i < scope.ratingValue }); } } } });

If you want Star Rating to dynamically try this,

Dynamic star rating

Working demo

Html

 <body ng-app="starApp"> <div ng-controller="StarCtrl"> <span ng-repeat="rating in ratings">{{rating.current}} out of {{rating.max}} <div star-rating rating-value="rating.current" max="rating.max" on-rating-selected="getSelectedRating(rating)"></div> </span> </div> </body>

script

 var starApp = angular.module('starApp', []); starApp.controller('StarCtrl', ['$scope', function ($scope) { $scope.rating = 0; $scope.ratings = [{ current: 5, max: 10 }, { current: 3, max: 5 }]; $scope.getSelectedRating = function (rating) { console.log(rating); } }]); starApp.directive('starRating', function () { return { restrict: 'A', template: '<ul class="rating">' + '<li ng-repeat="star in stars" ng-class="star" ng-click="toggle($index)">' + '\u2605' + '</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(); } }); } } });

There is a wonderful tutorial here to learn more about Angular Star Rating.

+24
source share

You can even try angular -ui. Here is the link .

Just add this tag.

 <rating ng-model="rate" max="max" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null">

+8
source share

You can store an array of such objects:

 var starApp = angular.module('starApp',[]); starApp.controller ('StarCtrl', ['$scope', function ($scope) { $scope.ratings = []; var rating = { current : 5, max : 10 } $scope.ratings.push(rating); // instead you would push what your http service returns into thearray. }]);

Then, in your opinion, you can use ng-repeat like this:

 <body ng-app="starApp"> <div ng-controller="StarCtrl"> <span ng-repeat="rating in ratings">{{rating.current}} out of {{rating.max}}</span> </div> </body>
+2
source share

  //Controller var starApp = angular.module('starApp', []); starApp.controller('StarCtrl', ['$scope', function ($scope) { $scope.maxRating = 10; $scope.ratedBy = 0; $scope.rateBy = function (star) { $scope.ratedBy = star; } }]); 
  .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: blue; } 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="starApp"> <div ng-controller="StarCtrl"> <ul class="rating"> <li ng-repeat="n in [].constructor(maxRating) track by $index"> <span ng-click="rateBy($index+1)" ng-show="ratedBy > $index" class="filled">&#9733;</span> <span ng-click="rateBy($index+1)" ng-show="ratedBy <= $index">&#9733;</span> </li> </ul> </div> </body>
+1
source share

My minimalistic approach:

View

 <head> <!-- alternatively you may use another CSS library (like FontAwesome) to represent the star glyphs --> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.min.js"></script> <!-- insert the JavaScript controller and the CSS enhancements here --> </head> <body> <div ng-app="StarRatings"> <div ng-controller="myController as ctrl"> <div ng-repeat="n in ctrl.getStarArray()" ng-class="ctrl.getClass(n)" ng-mouseover="ctrl.setClass($event,n)"> </div> <p> You have chosen {{ctrl.selStars}} stars </p> </div> </div> </body>

Note : if you want to use the onClick event instead of onMouseOver , then replace ng-mouseover with ng-click in the HTML above.

Controller

 <script> (function() { var app = angular.module('StarRatings', []); app.controller('myController', function() { this.selStars = 0; // initial stars count this.maxStars = 5; // maximum number of stars // a helper function used within view this.getStarArray = function() { var result = []; for (var i = 1; i <= this.maxStars; i++) result.push(i); return result; }; // the class used to paint a star (filled/empty) by its position this.getClass = function(index) { return 'glyphicon glyphicon-star' + (this.selStars >= index ? '' : '-empty'); }; // set the DOM element class (filled/empty star) this.setClass = function(sender, index) { this.selStars = index; sender.currentTarget.setAttribute('class', this.getClass(index)); }; }); })(); </script>

Maybe some CSS improvements

 <style> .glyphicon { color: gold; cursor: pointer; font-size: 1.25em; } </style>

Not sure? Try this JSFiddle: https://jsfiddle.net/h4zo730f/2/

+1
source share

hmc.starRating.js

 angular.module('starRatings',[]).directive('starRating', function () { return { restrict: 'A', template: '<ul class="rating">' + '<li ng-repeat="star in stars" ng-class="star">' + '\u2605' + '</li>' + '</ul>', scope: { ratingValue: '=', max: '=' }, link: function (scope, elem, attrs) { console.log(scope.ratingValue); function buildStars(){ scope.stars = []; for (var i = 0; i < scope.max; i++) { scope.stars.push({ filled: i < scope.ratingValue }); } } buildStars(); scope.$watch('ratingValue',function(oldVal, newVal){ if(oldVal !== newVal){ buildStars(); } }) } } }); <script src="hmc.starRating.js"></script> **app.js** var app = angular.module('app', ['ui.bootstrap', 'starRatings']); **indix.html** <div star-rating rating-value="7" max="8" ></div> .rating { color: #a9a9a9; margin: 0 !important; padding: 0 !important; } ul.rating { display: inline-block !important; } .rating li { list-style-type: none !important; display: inline-block !important; padding: 1px !important; text-align: center !important; font-weight: bold !important; cursor: pointer !important; width: 13px !important; color: #ccc !important; font-size: 16px !important; } .rating .filled { color: #ff6131 !important; width: 13px !important; }
0
source share

 let app = angular.module ('myapp',[]) 
 - ##star Rating Styles ----------------------*/ .stars { padding-top: 10px; width: 100%; display: inline-block; } span.glyphicon { padding: 5px; } .glyphicon-star-empty { color: #9d9d9d; } .glyphicon-star-empty, .glyphicon-star { font-size: 18px; } .glyphicon-star { color: #FD4; transition: all .25s; } .glyphicon-star:hover { transform: rotate(-15deg) scale(1.3); } 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div ng-app= "myapp" > <div class="stars"> <div id="stars" class="star"> <span ng-repeat="x in [0,1,2,3,4,5]" ng-if="($index < 4)" class="glyphicon glyphicon-star"> </span> <span ng-repeat="x in [0,1,2,3,4,5]" ng-if="($index >= 4 && $index < 5) " class="glyphicon glyphicon-star-empty"></span> </div> </div> </div>
0
source share

More articles:


All Articles