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.

Hi,

In old versions, like android 4.2.2, this plugin does not work correctly. The stars seems to be disabled, like in the status "read only".

Do you know why?

Thank you.

Hi! Could you tell me how can i make an input with ratings like this:

  <div class="item item-input">
      <span class="input-label">Satisfaction</span>
      <ionic-ratings ratingsobj="satisfactionObject"></ionic-ratings>
  </div>

But align ratings to the right of the field?

P.S.

text-align: right;

did not work

first problem : I have this loop in html file
"

In above code first of all what is index attribute for and i can't assign key to index attribute tell me how to assign value to index attribute.

Second Problem: below code in my js file code

$scope.ratingsObj = {
iconOn : 'ion-ios-star',
iconOff : 'ion-ios-star-outline',
iconOnColor: 'rgb(200, 200, 100)',
iconOffColor: 'rgb(200, 100, 100)',
rating: 0,
minRating:0,
readOnly:true,
callback: function(rating,index) {
$scope.ratingsCall(rating,index);
}
};
$scope.ratingsCall = function(rating,index) {
starRating = rating;
console.log(' rating is : ', index);
};
call back function not called in case of readOnly?
and how to assign rating to different values like for 1st comment there are 3 star and for second there 4 star so how to do this ??

this code has help me a lot thank you for that just wanted to know if its possible to pass the ratings to pass. thank you

Hi Rajesh,

I am trying to integrate the same which mentioned in Readme.md file. But I am unable to load stars on my broser. i am getting an error in console which is

TypeError: Cannot read property 'iconOn' of undefined
at link (http://localhost:8100/lib/ionic-rating.js:33:40)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:17040:44
at invokeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:17046:9)
at nodeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:16556:11)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:15905:13)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:15908:13)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:15908:13)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:15908:13)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:15908:13)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:15908:13)

I've incorporated this directive in Ionic 1.2.4 and it works perfect on Android 4.4+, iOS 8 and 9 but on some older devices 4.3 and 4.2 I can't get it to work. The stars show up but clicking them does not trigger the actions. I tried deconstructing the file and find a solution but I haven't found a workaround. Any insight as to where I should look? (I even tried to replace the ng-click directly to execute a simple action and it does not seem to be hooked).

Template

<div class="item item-text-wrap">
    <ionic-ratings ratingsobj='ratingsObject'></ionic-ratings>
</div>

Controller

$scope.ratingsObject = {
    iconOn: 'ion-ios-star',
    iconOff: 'ion-ios-star-outline',
    iconOnColor: 'rgb(248, 166, 30)',
    iconOffColor:  'rgb(30, 75, 100)',
    rating:  storage.getRating(id),
    minRating:0,
    readOnly: false,
    callback: function(rating) {
        $scope.ratingsCallback(id,rating);
    }
};
$scope.ratingsCallback = function(id,rating) {
    storage.setRating(id, rating);
    var alertPopup = $ionicPopup.alert({
        title: id,
        template: rating,
    });
    alertPopup.then(function(res) {     });
};

A shadow appears when we click on rating in iOS only.Working fine in android.

Hi, thanks for your code.
Is there any way of altering the rating programmatically?
That would be a great feature.
Thanks.

Hi,

Thanks for this great component. I am running into an issue where I have implemented it and am testing it on an IOS simulator and when I select a high rating and then try to change it to be lower then the UI flashes and a 6th star appears momentarily below the other stars.

Additionally if 3 stars are selected and I click the 3rd star, the UI will flash, the 6th star will flash and disappear and only 1 star will be selected

I tried putting a 0 rating as the default and it still shows 1-star rating.

The stars flicker on both iOS safari and OS x safari when I click them.
I recorded my screen so you can see.
Archive.zip

Hi Rajeshwar,

Nice works for the ionic-ratings.
When i try your component, i can't set 0 for rating or minRating.
I have try your codepen and same issue still happening.
Here's what i try in codepen and its work:

    scope.rating = (typeof scope.ratingsObj.rating !== 'undefined') ? scope.ratingsObj.rating : 0;
    scope.minRating = (typeof scope.ratingsObj.minRating !== 'undefined') ? scope.ratingsObj.minRating : 0;

Thanks

How do I remove this completely?

I want to reset ionic rating after submitting feedback. How do it ?

I tried calling "ratingobject" again but this dint worked for me.

Please help me out it would be really helpful.

Hello! I've been playing with this plugin for a while but it seems that if you set rating:0 on the $scope.ratingsObjectit isn't working: Here you have the example that I've tried:

      $scope.ratingsObject = {
        iconOn: 'ion-ios-star',    //Optional
        iconOff: 'ion-ios-star-outline',   //Optional
        iconOnColor: 'rgb(200, 200, 100)',  //Optional
        iconOffColor:  'rgb(200, 100, 100)',    //Optional
        rating:  0, //Optional
        minRating:0,    //Optional
        readOnly: true, //Optional
        callback: function(rating) {    //Mandatory
          $scope.ratingsCallback(rating);
        }
      };

And here a fork of the codepen demo with the values set to 0 as in the code above.
http://codepen.io/anon/pen/XXRMrN

hi,

how to set this as readonly?

Hi, i am trying to show half star rating like 2.5 , 1.5 ... how can i manage to do that ? i am getting 6 stars instead.
thanks

Im using ionic 3 to develop. How can I use it?

Is there any possibility in adding a 'required' field within the ratingsObject so that the user must select a star?

Thank you,
Kirsten

I can set my own image on iconOn and iconOff is it possible?

Hi,

The rating didn't work on HTC One (Android 4.3 - API 18) and Samsung (GT-19305 Android 4.3). The ng-click function (scope.ratingsClicked) is not invoked when the rating is clicked.

The rating did work on Chrome and Samsung Galaxy Android 4.4.4.

Do you have any thoughts on why this is happening?

Regards,
Jennifer