How to show Rating Dynamically
If you want to show rating dynamically you can follow the code below. Here phone.rating contains rating and it comes dynamically.
<html>
<div class="rating-block clearfix" funboard-rating rating-value="phone.rating" max="5" >
</div>
</html>
<script>
phonecatApp.directive('funboardRating', function () {
return {
restrict: 'A',
template: '<div class="ratingStar1">' +
'<span ng-repeat="star in stars" ng-class="star">' +
'\★' +
'</span>' +
'</div>',
scope: {
ratingValue: '=',
max: '='
},
link: function (scope, elem, attrs) {
scope.stars = [];
for (var i = 0; i < scope.max; i++) {
scope.stars.push({filled1: i < scope.ratingValue});
}
}
}
});
</script>
css:
.ratingStar1{color: #a9a9a9;}
.ratingStar1 span{
display: inline-block;
position: relative;
width: 1.1em;
color:#fff;
font-size:22px;
}
.ratingStar1 {width:100%}
.ratingStar1 .filled1 {color: #f83833;}
0 Comment(s)