CODEWITHSUNDEEP
javascriptangularjs
Ashok Kumar Sahoo
Ashok Kumar Sahoo

Reputation: 580

Rendering a Star Rating System using angularjs

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

Is it a good idea to create arrays from $scope.current and $scope.max - $scope.current and pass them and run ng-repeat over them, or there is a more optimised solution than this. Iteration ng-repeat only X times in AngularJs

Upvotes: 9

Views: 37042

Answers (7)

Nidhish Krishnan
Nidhish Krishnan

Reputation: 20751

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

enter image description here

If you want just simply to display Rating as star then try the below one

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 to do Star Rating dynamically try this out

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 for more explanation about Angular Star Rating

Upvotes: 29

makrem soltane
makrem soltane

Reputation: 11

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>

Upvotes: 1

Eugen Mihailescu
Eugen Mihailescu

Reputation: 3711

My minimalistic approach:

The 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 onMouseOver event then replace ng-mouseover with ng-click in the HTML above.

The 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>

Optionally some CSS enhancements

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

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

Upvotes: 1

Ashish Gupta
Ashish Gupta

Reputation: 1241

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;
    }

Upvotes: 0

Arun Saini
Arun Saini

Reputation: 7824

 //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>

Upvotes: 3

Shivaraj
Shivaraj

Reputation: 613

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

Just need to add this tag.

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

Upvotes: 9

JoshSGman
JoshSGman

Reputation: 449

You could hold an array of objects like so: 

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 view you could use ng-repeat like so: 

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

Upvotes: 2

Related Questions