Rendering a star rating system using directives

Question

I am trying to create a star rating system statically using angularjs/ionic with little success. But currently nothing is output to the screen... what I am I doing wrong?

service.html

  <ion-list>
    <ion-item ng-repeat="business in businessList track by $index" class="item-icon-right">
      <h2>{{business.name}}</h2> {{business.distance}} miles
      <br>
      <div star-rating rating-value="{{business.rating}}" max="rating.max"></div>
      <i class="icon ion-chevron-right icon-accessory"></i>
    </ion-item>
  </ion-list>

directives.js

angular.module('starter.directives', [])

.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.rating
        });
      }
    }
  }
});

services.js

.service("BusinessData", [function () {
    var businessData = [
    {
        id: 1,
        serviceId: 1,
        name: 'World Center Garage',
        distance: 0.1,
        rating: 4
    }
];

    return {
        getAllBusinesses: function () {
            return businessData;
        },

        getSelectedBusiness: function(serviceId) {
            var businessList = [];
            serviceId = parseInt(serviceId);
            for(i=0;i<businessData.length;i++) {
                if(businessData[i].serviceId === serviceId) {
                    businessList.push(businessData[i]);
                }
            }
            return businessList;
        }
    }
}])

controller.js

.controller('ServiceCtrl', function($scope, ServicesData, BusinessData, $stateParams) {
  $scope.service = ServicesData.getSelectedService($stateParams.service);
  $scope.businessList = BusinessData.getSelectedBusiness($stateParams.service);
});

Can you please tell us if anything is displayed in your console? Is everything loaded correct? What happens, and what doesn't happen? — Patrick, Jan 18 '16 at 13:12
If I replace `
` with `{{business.rating}} out of 5 stars` then I get the correct output (i.e. 4 out of 5 stars in this case). I guess the problem is harmonising the directive's manipulation of that value, and eventual output on service.html — methuselah, Jan 18 '16 at 13:14
@KunalKakkad I am not sure how I would go about doing that, but I based the codebase on the solution found in this question here: http://stackoverflow.com/questions/23646395/rendering-a-star-rating-system-using-angularjs — methuselah, Jan 18 '16 at 13:18
"Should be"? Can you check? If it's 0 it would explain why you don't see anything — Patrick, Jan 18 '16 at 13:21
@Patrick it has not been set anywhere in my codebase. Where would I set it? Sorry I am not sure. — methuselah, Jan 18 '16 at 13:22
You can't just copy stuff from the Internet and assume it works. In the question you linked to (which you should have attributed in your question to make it easier to start with) a list of ratings (which each have a max property) is used. In your question you need a `$scope.rating = { max: 5 }` in your ServiceCtrl to make it work. — Patrick, Jan 18 '16 at 13:23
Sorry. I was trying to learn how to do something new. But thanks for being patient and willing to respond. In which file shall I place the scope.rating value? — methuselah, Jan 18 '16 at 13:25
i think you will also be not getting the `business.rating`. So i think you need to define it too in controller.js — Kunal Kakkad, Jan 18 '16 at 13:31
In your ServiceCtrl controller, if you type `$scope.rating = { max: 5 }` after say your `$scope.businessList = ...` statement the rating object will be accessible from your view. — Patrick, Jan 18 '16 at 13:46
@Patrick Thanks. But I have just tested it and it doesn't work — methuselah, Jan 18 '16 at 15:53
@methuselah: How doesn't it work? What happens? If you want help you need to explain what errors you get (if any) and why something doesn't happen. If you inspect the variables, what values do they have, and what *does* happen? — Patrick, Jan 18 '16 at 20:38

Kunal Kakkad · Accepted Answer · 2016-01-19T03:40:06.230

2

controller.js

.controller('ServiceCtrl', function($scope, ServicesData, BusinessData, $stateParams) {
  $scope.service = ServicesData.getSelectedService($stateParams.service);
  $scope.businessList = BusinessData.getSelectedBusiness($stateParams.service);
  $scope.ratings = {
      current: 5,
      max: 10
     };

And also modify service.html

<div star-rating rating-value="rating.current" max="rating.max"></div>

Hope it will help you out.!!

edited Jan 19 '16 at 03:40

answered Jan 18 '16 at 13:34

Kunal Kakkad

653
6
19

This is not correct, as the ratings object on the scope is a list, and in the html code you reference a `rating` object, which you haven't added to the controller. – Patrick Jan 18 '16 at 14:02
Hey can you please check it now as i have updated my answer in controller.js – Kunal Kakkad Jan 19 '16 at 03:40

Rendering a star rating system using directives

1 Answers1