python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
star rating demo code in angularjs

star rating demo code in angularjs

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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions