Read-only mode does't work, i think there is wrong binding mode.

scope: {
    readonly: '=?'
},

Could you please replace to '@'. It's looks like:

scope: {
    readonly: '@'
},

Hi guys, I am using the latest version (from master) of ionic-rating and I had a issue with that. I don't know much how to explain, but I know it's related with variable scoping.

In a screen I show user data I have something like:
$scope.user = {id: 1, name: 'Foo', rating: 2.5}

In template if I use like below, It only shows 3 stars (the last <i> get the class ion-ios-star):
<rating class="xs-rating" ng-model="user.rating" max="5" readonly="true"></rating>

I got to do it to work:

$scope.ratings = {}
$scope.ratings[$scope.user.id] = $scope.user.rating

<rating ng-repeat="c in ratings" class="xs-rating" ng-model="c" max="max" readonly="true"></rating>

I hope it may help. Thanks.

Can't set rating while using directive inside modal window.

How can we use different stars icon ?
I'd like for example to use font-awsome classes (fa fa-star etc), instead of ionic ones (ion-ios-star etc)
Is that possible ?

It would be good to have half-stars steps
Maybe this would be an inspiration:
ionic-team/ionic-framework#2534

I have a useref task, which is outputting one single lib.js file (including ionic-rating).
Afterwards I am gulp-uglify'ing that lib.js file. Unfortunately my dist app doesn't work anymore because ionic-rating is not minification safe.

As is:
.controller('RatingController', function($scope, $attrs, ratingConfig) {...
and
.directive('rating', function($timeout) {...

To be:
.controller('RatingController', ['$scope', '$attrs', 'ratingConfig', function($scope, $attrs, ratingConfig) {...
and
.directive('rating', ['$timeout', function($timeout) {...

Another solution could be ngInject, instead of using the DI-array.

at Ionicframework, stars are not coming a one row , I tried to change in ionic-rating.css ul.rating li { } but does not change anything, however, i can see there is already display: inline being used but it is not working .

I'm getting this error:
https://docs.angularjs.org/error/$injector/strictdi?p0=RatingController

you should annotate your controller so your module can run on strict-di.

change to something like:
.controller('RatingController', [ '$scope', '$attrs', 'ratingConfig', function($scope, $attrs, ratingConfig)

don't forget the closing ]

The click event doesn't get handled (so the rate function doesn't get invoked) when inside a label, for example:

<label class="item item-input item-stacked-label">
    <span class="input-label">Rating</span>
    <rating ng-model="review.rating" max="5"></rating>
</label>```

I was trying to install this, but in the README.md I did not see a reference to include the following line of code:
<link href="lib/ionic-rating/ionic-rating.css" rel="stylesheet">
Great addition though! Thanks for making it.

After selecting some rating, we have no ability to reset value. In my opinion, additional parameter for add reset button will be useful.

I tried putting it on my app but it only displays one star even if I change the values of $scope.rate and
$scope.max. I downloaded the zip file, copied the 2 js files in my app, copied the content of ionic-rating.css in my own css and followed the other instructions. Am I missing something?

By the way, I'm using it inside an ionic modal.

The abiilty to provide a dynamic function to the component to handle special cases.

Redirection after rating, changing the state of another variable, etc etc

Model doesn't update when directive is in modal. Initially the stars are set but when you change it the model doesn't update with the new value.

Can we add reviews to the rating that will display on the user profile?

I could have missed something, but clicking/tapping on the stars doesn't change the $scope.rate value.
The code exists in the page:

<li ng-repeat="r in range track by $index" ng-click="rate($index + 1)" class=""><i class="icon ion-ios-star" ng-class="$index < value &amp;&amp; (r.stateOn || 'ion-ios-star') || (r.stateOff || 'ion-ios-star-outline')"></i></li>

I have included the <script src="lib/ionic-rating/ionic-rating.js"></script> in index.html and added ionic.rating as a dependency in my app.

Hi Frasier, I see $scope.readonly mentioned in the code, but setting $scope.readonly = true does nothing. How do I enable read-only?

Hello, first of all thanks for sharing your code. I have tested it in a new empty project and works great. However, when I integrate it into my project the stars dont appear but I know the ul and li elements exists because I can see them using the inspect elements feature of the browser.

I have attached a image that shows that the elements exist but the stars are not printed. I have tried to use the z-index option in case these were hidden but no luck.

In my index.html I have included the library with the ionic-rating.js and the ionic-rating.css. In the body of the index I have a ng-view that changes dynamically. When I want the stars to appear I do the following, add the controller to the ion-content element and this line of code: . In the app.js, I have integrated 'ionic.rating' and in the controller I initialize it by doing $scope.rate= 3, $scope.max =5.

Do you have any idea what I am doing wrong?

Best,
Yeray

bug on ng-repeat not updating the stars

Hi,

For some reason my starts are vertically aligned. How to set to horizontal?

Greatings

Ionic 2 support will be greatly appreciated

Hello,
This is nice rate solution for me thanks for it but its not working in IonicModal box can you help me ?

Thanks in advance ;)

How can I use this directive in a list, i.e. multiple ratings, one per row?
I can't find a way to bind the ng-model to the data.

Hi, i want to block the rating behavior after click on the stars.
The idea is: when the user rates, the stars turn to readOnly state, and show popup message like: "you have already voted"

I've gone through the steps but am not seeing the ratings come up. Added JS/CSS to my index.html file, required the module in my controller, added the snippet from the example into my view, but it doesn't come up -- something I may be missing?

I'm new to bower and ionic, and couldn't get your package to work!

Injected it like so:
angular.module('myApp.controllers', ['ionic.rating'])

Yet:

Uncaught Error: [$injector:modulerr] Failed to instantiate module stakes due to:
Error: [$injector:modulerr] Failed to instantiate module ionic-rating due to:
Error: [$injector:nomod] Module 'ionic-rating' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

In my app's root folder:

$ bower info ionic-rating
bower ionic-rating#*            cached git://github.com/fraserxu/ionic-rating.git#0.1.0
bower ionic-rating#*          validate 0.1.0 against git://github.com/fraserxu/ionic-rating.git#*

{
  name: 'ionic-rating',
  main: 'ionic-rating.js',
  version: '0.1.0',
  homepage: 'https://github.com/fraserxu/ionic-rating',
  authors: [
    'fraserxu <[email protected]>'
  ],
  description: 'Star rating bar for ionic',
  keywords: [
    'ionic',
    'angularjs',
    'rating',
    'web'
  ],
  license: 'MIT',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
}

Available versions:
  - 0.1.0
  - 0.0.2
  - 0.0.1
You can request info for a specific version with 'bower info ionic-rating#<version>'

Hi, i have a problem with making html/css for displaying rating start + a text note. like this:

Satisfaction * * * * *

So i need it inline

Here is my current code. labelbox draws a box, very similar to ionic label

        <label class="item item-input">
          <input type="date" placeholder="Date">
        </label>
        <label class="item item-input">
          <input type="time" placeholder="Time">
        </label>

        <div class="labelbox">
          Satisfaction 
          <rating ng-model="rate" max="max"></rating>
       </div>

.labelbox {
    border: 1px solid rgb(215,215,215);
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

angular.module('starter', ['ionic','ionic-rating','starter.controllers', 'starter.services'])

adding ionic-rating as a dependency gives error and app fails to initiate. Although the js file is copied to
'ionic-rating': 'www/lib/ionic-rating/ionic-rating.js',

I'm trying to install ionic-rating through bower, but am getting the following error, any workaround?

bower ionic#1.1.0 ECMDERR Failed to execute "git ls-remote --tags --heads git://github.com/driftyco/ionic-bower.git", exit code of #128 fatal: Unable to look up github.com (port 9418) (nodename nor servname provided, or not known)

Additional error details:
fatal: Unable to look up github.com (port 9418) (nodename nor servname provided, or not known)

I just want to add different colors to the selected stars.. I don't want the default black color..

Attributes state-on, state-off and rating-states doesn't work for me.

When I try to change default icons (to not to be stars), e.g. by writing
<rating ng-model="x" state-on="'ion-thumbsup'" state-off="'ion-thumbsup'"></rating>
or
<rating ng-model="y" rating-states="ratingStates"></rating>
this doesn't work. In first case, icons doesn't change, and in second case rating isn't displayed at all (even with default stars).

Apart from this, rating works just fine.

Hi, this is a great directive. I'm using this for displaying an average rating which doesn't allow update.

Is there a "disabled" attribute?

How can I detect changes to the rating control?
So that I can save the rating value?