- AngularJs Library file,
- Directives,
- Scops,
- Templates,
- Links and
- Watch etc.
The Table of Context
- The CSS Code Sample
- The HTML Code Sample
- The JavaScript Code Sample
- Example code with all the above section
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. //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>