/ / star rating demo code in angularjs
star rating demo code in angularjs

star rating demo code in angularjs

Edit
I am going to share the code sample for Star Rating demo application using AngularJs framework. The blow table context show the baby steps of development cods. In the Star Rating, I have used to 

  1. AngularJs Library file,
  2. Directives,
  3. Scops, 
  4. Templates, 
  5. Links and 
  6. Watch etc.

The Table of Context 
  1. The CSS Code Sample 
  2. The HTML Code Sample 
  3. The JavaScript Code Sample 
  4. Example code with all the above section
The CSS Code sample
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22

.starRating {
      margin: 0;
      padding: 0;
      color: #a9a9a9;
    }
    .starRating li {
      list-style-type: none;
      display: inline-block;
      padding: 3px;
      font-weight: bold;
      cursor: pointer;
    }
    .starRating .filled {
      color: green;
    }
.starRating {

      margin: 0;

      padding: 0;

      color: #a9a9a9;

    }

    .starRating li {

      list-style-type: none;

      display: inline-block;

      padding: 3px;

      font-weight: bold;

      cursor: pointer;

    }

    .starRating .filled {

      color: green;

    }

The HTML Code Sample
?
1
2
3
4
5
6
7
<body ng-app="app">
  <div ng-controller="controller">
    <h3>Star Rating</h3>
    <div ng-init="rating = star.rating + 1"></div>
    <div star-rating rating-value="rating" data-max="5"></div>
  </div>
</body>
<body ng-app="app">
  <div ng-controller="controller">
    <h3>Star Rating</h3>
    <div ng-init="rating = star.rating + 1"></div>
    <div star-rating rating-value="rating" data-max="5"></div>
  </div>
</body>

The JavaScript Code Sample
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
var ng = angular.module('app', []);
ng.controller('controller', function($scope) {
  $scope.rating = 5;
});
ng.directive('starRating',
  function() {
    return {
      //This template is used to display the star UX in repeted form.
      template: '<ul class="starRating">' + '   <li ng-repeat="star in stars" ng-class="star" ng-click="toggleFunck($index)">' + '\u2605' + '</li>' + '</ul>',
      scope: {
        ratingValue: '=',
        max: '=',
        onStarRating: '&'
      },
      link: function(scope, elem, attrs) {
        //This method is used to update the rating run time.
        var updateRating = function() {
          //This is global level collection.
          scope.stars = [];
          //Loop called with the help of data-max directive input and push the stars count.
          for (var i = 0; i < scope.max; i++) {
            scope.stars.push({
              filled: i < scope.ratingValue
            });
          }
        };
        //This is used to toggle the rating stars.
        scope.toggleFunck = function(index) {
          //This is used to count the default start rating and sum the number of imput index.
          scope.ratingValue = index + 1;
           
          scope.onStarRating({
            rating: index + 1
          });
        };
        //This is used to watch activity on scope, if any changes on star rating is call autometically and update the stars.
        scope.$watch('ratingValue',
          function(oldV, newV) {
            if (newV) {
              updateRating();
            }
          }
        );
      }
    };
  }
);
var ng = angular.module('app', []);

ng.controller('controller', function($scope) {
  $scope.rating = 5;
});

ng.directive('starRating',
  function() {
    return {
      //This template is used to display the star UX in repeted form.
      template: '<ul class="starRating">' + '   <li ng-repeat="star in stars" ng-class="star" ng-click="toggleFunck($index)">' + '\u2605' + '</li>' + '</ul>',
      scope: {
        ratingValue: '=',
        max: '=',
        onStarRating: '&'
      },
      link: function(scope, elem, attrs) {
        //This method is used to update the rating run time.
        var updateRating = function() {
          //This is global level collection.
          scope.stars = [];

          //Loop called with the help of data-max directive input and push the stars count.
          for (var i = 0; i < scope.max; i++) {
            scope.stars.push({
              filled: i < scope.ratingValue
            });
          }
        };

        //This is used to toggle the rating stars.
        scope.toggleFunck = function(index) {
          //This is used to count the default start rating and sum the number of imput index.
          scope.ratingValue = index + 1;
          
          scope.onStarRating({
            rating: index + 1
          });
        };

        //This is used to watch activity on scope, if any changes on star rating is call autometically and update the stars.
        scope.$watch('ratingValue',
          function(oldV, newV) {
            if (newV) {
              updateRating();
            }
          }
        );

      }
    };
  }
);

Star Rating Demo Application: The Full Example Code as give below.

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="utf-8">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
  <style>
    .starRating {
      margin: 0;
      padding: 0;
      color: #a9a9a9;
    }
    .starRating li {
      list-style-type: none;
      display: inline-block;
      padding: 3px;
      font-weight: bold;
      cursor: pointer;
    }
    .starRating .filled {
      color: green;
    }
  </style>
  <script type="text/javascript">
    var ng = angular.module('app', []);
    ng.controller('controller', function($scope) {
      $scope.rating = 5;
    });
    ng.directive('starRating',
      function() {
        return {
          //This template is used to display the star UX in repeted form.
          template: '<ul class="starRating">' + '   <li ng-repeat="star in stars" ng-class="star" ng-click="toggleFunck($index)">' + '\u2605' + '</li>' + '</ul>',
          scope: {
            ratingValue: '=',
            max: '=',
            onStarRating: '&'
          },
          link: function(scope, elem, attrs) {
            //This method is used to update the rating run time.
            var updateRating = function() {
              //This is global level collection.
              scope.stars = [];
              //Loop called with the help of data-max directive input and push the stars count.
              for (var i = 0; i < scope.max; i++) {
                scope.stars.push({
                  filled: i < scope.ratingValue
                });
              }
            };
            //This is used to toggle the rating stars.
            scope.toggleFunck = function(index) {
              //This is used to count the default start rating and sum the number of imput index.
              scope.ratingValue = index + 1;
               
              scope.onStarRating({
                rating: index + 1
              });
            };
            //This is used to watch activity on scope, if any changes on star rating is call autometically and update the stars.
            scope.$watch('ratingValue',
              function(oldV, newV) {
                if (newV) {
                  updateRating();
                }
              }
            );
          }
        };
      }
    );
  </script>
</head>
<body ng-app="app">
  <div ng-controller="controller">
    <h3>Star Rating</h3>
    <div ng-init="rating = star.rating + 1"></div>
    <div star-rating rating-value="rating" data-max="5"></div>
  </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="utf-8">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
  <style>
    .starRating {
      margin: 0;
      padding: 0;
      color: #a9a9a9;
    }
    .starRating li {
      list-style-type: none;
      display: inline-block;
      padding: 3px;
      font-weight: bold;
      cursor: pointer;
    }
    .starRating .filled {
      color: green;
    }
  </style>
  <script type="text/javascript">
    var ng = angular.module('app', []);
    ng.controller('controller', function($scope) {
      $scope.rating = 5;
    });
    ng.directive('starRating',
      function() {
        return {
          //This template is used to display the star UX in repeted form.
          template: '<ul class="starRating">' + '   <li ng-repeat="star in stars" ng-class="star" ng-click="toggleFunck($index)">' + '\u2605' + '</li>' + '</ul>',
          scope: {
            ratingValue: '=',
            max: '=',
            onStarRating: '&'
          },
          link: function(scope, elem, attrs) {
            //This method is used to update the rating run time.
            var updateRating = function() {
              //This is global level collection.
              scope.stars = [];
              //Loop called with the help of data-max directive input and push the stars count.
              for (var i = 0; i < scope.max; i++) {
                scope.stars.push({
                  filled: i < scope.ratingValue
                });
              }
            };
            //This is used to toggle the rating stars.
            scope.toggleFunck = function(index) {
              //This is used to count the default start rating and sum the number of imput index.
              scope.ratingValue = index + 1;
              
              scope.onStarRating({
                rating: index + 1
              });
            };
            //This is used to watch activity on scope, if any changes on star rating is call autometically and update the stars.
            scope.$watch('ratingValue',
              function(oldV, newV) {
                if (newV) {
                  updateRating();
                }
              }
            );
          }
        };
      }
    );
  </script>
</head>
<body ng-app="app">
  <div ng-controller="controller">
    <h3>Star Rating</h3>
    <div ng-init="rating = star.rating + 1"></div>
    <div star-rating rating-value="rating" data-max="5"></div>
  </div>
</body>
</html>
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

www.code-sample.com/. Powered by Blogger.
^