How to show multiple ratings

[divick]

I am trying to figure out how to pass ratingObj in an ngRepeat. If it is a single object, it is quite simple, but if there is a list of ratings that I am fetching then it is not clear how to display it.

I was thinking along these lines, but it complains for undefined variable for scope.ratingsObj

Assuming ratingList is a list of ratingObjects that I create after fetching the list of ratings from server, then

complains with TypeError: Cannot read property 'iconOn' of undefined, which is because of scope.ratingsObj being undefined.

[reliash]

In the ionic-rating.js, change the following:

At the scope, add index: '=index'
scope: {
ratingsObj: '=ratingsobj',
index: '=index'
},

At the call to the Callback, add the "index" parameter (2 places)
scope.ratingsObj.callback(scope.index, scope.rating);

In your HTML file, define the index parameter inside the ng-repeat like:

In your js file, add the index parameter to the callback definition:
$scope.ratingsObject = {
callback: function(id, rating) {
$scope.ratingsCallback(id, rating);
}
};

and the callback itself:
$scope.ratingsCallback = function(id, rating) {
console.log('Rating of ' + id + ' is : ', rating);
};

[mrjleo198901]

Hi dude, i put the ionic-ratings inside ion-slide, but i want to update de rating value every time the slide has changed (I'm getting the 'avg' value form my DB), How can I change the value of avg every time you change the slide?

$scope.ratingsObjectAvg = {
iconOn: 'ion-ios-star',
iconOff: 'ion-ios-star-outline',
iconOffColor: 'rgb(200, 200, 100)',
iconOnColor: 'rgb(255, 255, 255)',
rating: avg,
minRating: 1,
readOnly: true,
callback: function (rating, index) {
$scope.ratingsCallback(rating, index);
}
};

[rohitrediff]

Its working for me what should you do
In Your ionic-ratings tag add rating field and then change the code of rating controller as following:
<ionic-ratings ratingsobj='ratingsObject' rating='3' index='0' ></ionic-ratings>
And In Your Controller Add the Code which is following:
scope: { ratingsObj: '=ratingsobj', index: '=index', rating: '=rating'

  },
  link: function(scope, element, attrs) {

    //Setting the default values, if they are not passed
    scope.iconOn = scope.ratingsObj.iconOn || 'ion-ios-star';
    scope.iconOff = scope.ratingsObj.iconOff || 'ion-ios-star-outline';
    scope.iconOnColor = scope.ratingsObj.iconOnColor || 'rgb(200, 200, 100)';
    scope.iconOffColor = scope.ratingsObj.iconOffColor || 'rgb(200, 100, 100)';
    //scope.rating = scope.ratingsObj.rating || 0;
    scope.minRating = scope.ratingsObj.minRating || 0;
    scope.readOnly = scope.ratingsObj.readOnly || false;
    scope.index = scope.index || 0;
    scope.rating = scope.rating || 0;
	

    //Setting the color for the icon, when it is active
    scope.iconOnColor = {
      color: scope.iconOnColor
    };

    //Setting the color for the icon, when it is not active
    scope.iconOffColor = {
      color: scope.iconOffColor
    };

    //Setting the rating
    scope.rating = (scope.rating > scope.minRating) ? scope.rating : scope.minRating;

    //Setting the previously selected rating
    scope.prevRating = 0;

    //scope.$watch('ratingsObj.rating', function(newValue, oldValue) {
    scope.$watch('rating', function(newValue, oldValue) {
      setRating(newValue);
    });

    function setRating(val, uiEvent) {
      if (scope.minRating !== 0 && val < scope.minRating) {
        scope.rating = scope.minRating;
      } else {
        scope.rating = val;
      }
      scope.prevRating = val;
      if (uiEvent) scope.ratingsObj.callback(scope.rating, scope.index);
    }

    //Called when he user clicks on the rating
    scope.ratingsClicked = function(val) {
      setRating(val, true);
    };
    
    //Called when he user un clicks on the rating
    scope.ratingsUnClicked = function(val) {
      if (scope.minRating !== 0 && val < scope.minRating) {
        scope.rating = scope.minRating;
      } else {
        scope.rating = val;
      }
      if (scope.prevRating == val) {
        if (scope.minRating !== 0) {
          scope.rating = scope.minRating;
        } else {
          scope.rating = 0;
        }
      }
      scope.prevRating = val;
      scope.ratingsObj.callback(scope.rating, scope.index);
    };
  }
};

}`

So It will display different stars
<div class="rate-right" ng-repeat="order in orders" ><ionic-ratings ratingsobj='ratingsObject' rating='order.rt_rate' index='0' ></ionic-ratings></div>

[monsif]

In order to create multiple rating for multiple user for example, try the folloing :
create a factory that return your rating object:

.factory('RatingsFactory', function($http) {
  // instantiate our initial object
  var RatingsFactory = function(rating) {
    this.rating = rating;
  };
  RatingsFactory.prototype.getRatingObj = function() {
    return {
      iconOn: 'ion-ios-star',    //Optional
      iconOff: 'ion-ios-star-outline',   //Optional
      iconOnColor: 'rgb(215, 186, 25)',  //Optional
      iconOffColor: 'rgb(215, 186, 25)',    //Optional
      minRating: 1,    //Optional
      rating:this.rating,
      readOnly: false, //Optional
      callback: function (rating, index) {    //Mandatory
        ratingsCallback(rating, index);
      }
    };
    function ratingsCallback (rating, index) {
      console.log('Selected rating is : ', rating, ' and the index is : ', index);
    };
  };
  return RatingsFactory;
})

Then in your controller :

$scope.users = [{name:'Monsif Mabrouk',price:12,img:'/img/ben.png',ratingsObject:new RatingsFactory(5).getRatingObj()}
    ,{name:"Monsif Mabrouk",price:12,img:"/img/ben.png",rating:3,ratingsObject:new RatingsFactory(1).getRatingObj()}]

And finally your html should look like this :

  <ion-list>
    <ion-item class="item-avatar " ng-repeat="item in users" >
      <img src="{{item.img}}" />
      <h2>{{item.name}}</h2>
      <ionic-ratings ratingsobj="item.ratingsObject" index='0'></ionic-ratings>
    </ion-item>
  </ion-list>

[tkalpit]

In order to create multiple rating for multiple user for example, try the folloing :
create a factory that return your rating object:

.factory('RatingsFactory', function($http) {
  // instantiate our initial object
  var RatingsFactory = function(rating) {
    this.rating = rating;
  };
  RatingsFactory.prototype.getRatingObj = function() {
    return {
      iconOn: 'ion-ios-star',    //Optional
      iconOff: 'ion-ios-star-outline',   //Optional
      iconOnColor: 'rgb(215, 186, 25)',  //Optional
      iconOffColor: 'rgb(215, 186, 25)',    //Optional
      minRating: 1,    //Optional
      rating:this.rating,
      readOnly: false, //Optional
      callback: function (rating, index) {    //Mandatory
        ratingsCallback(rating, index);
      }
    };
    function ratingsCallback (rating, index) {
      console.log('Selected rating is : ', rating, ' and the index is : ', index);
    };
  };
  return RatingsFactory;
})

Then in your controller :

$scope.users = [{name:'Monsif Mabrouk',price:12,img:'/img/ben.png',ratingsObject:new RatingsFactory(5).getRatingObj()}
    ,{name:"Monsif Mabrouk",price:12,img:"/img/ben.png",rating:3,ratingsObject:new RatingsFactory(1).getRatingObj()}]

And finally your html should look like this :

  <ion-list>
    <ion-item class="item-avatar " ng-repeat="item in users" >
      <img src="{{item.img}}" />
      <h2>{{item.name}}</h2>
      <ionic-ratings ratingsobj="item.ratingsObject" index='0'></ionic-ratings>
    </ion-item>
  </ion-list>

Where to add factory code?