Ionic-ratings : Bower component for Ionic framework applications


#1

##Introduction:

This is an ionic-ratings bower component which can be used with any Ionic framework’s application.

View Demo

View @ GitHub

##Prerequisites.

  • node.js
  • bower
  • gulp.

##How to use:

1) In your project repository install the ionic-ratings using bower
bower install ionic-ratings --save

This will install the latest version released.

2) Give the path of ionic-ratings.js in your index.html file.
<!-- path to ionic/angularjs js -->
<script src="lib/ionic-ratings/dist/ionic-ratings.js"></script>
3) In your application module inject the dependency ionic-ratings, in order to work with it.
angular.module('mainModuleName', ['ionic', 'ionic-ratings']){
 //
}
4) In your controller, please define the object which you need to pass to the directive.
.controller('ControllerName', ['$scope', function($scope) {
   
      $scope.ratingsObject = {
        iconOn : 'ion-ios-star',
        iconOff : 'ion-ios-star-outline',
        iconOnColor: 'rgb(200, 200, 100)',
        iconOffColor:  'rgb(200, 100, 100)',
        rating:  2,
        minRating:1,
        callback: function(rating) {
          $scope.ratingsCallback(rating);
        }
      };
  
      $scope.ratingsCallback = function(rating) {
        console.log('Selected rating is : ', rating);
      };

}])

The properties of are as follows.

a) iconOn : This is an optional property. You can give any icon from ionicons. This icon will be shown when the icon is active.

b) iconOff : This is an optional property. You can give any icon from ionicons. This icon will be shown when the icon is inactive.

c) iconOnColor : This is an optional property. You can give any color. The color format can be red or #00FF00 or rgb(200, 200, 100). This color will be shown when the icon is active.

c) iconOffColor : This is an optional property. You can give any color. The color format can be red or #00FF00 or rgb(200, 200, 100). This color will be shown when the icon is inactive.

e) rating : This is an optional property. You can pass any values starting from 0. This is the initial/default rating.

f) minRating : This is an optional property. You can pass any values starting from 0. This is the minimum value a user can select.

g) callback : This is a mandatory property. This will be called when the user selects a rating. You can get the selected rating in this callback.

5) In your template you can use like below
<ionic-ratings ratingsobj='ratingsObject'></ionic-ratings>

##CSS Classes:
You can customize font, width and height of the icons using these classes.

1) ionic_rating_icon_on
2) ionic_rating_icon_off

ionic-ratings icon on
ionic-ratings icon off

You can also use the following css class for changing the properties of each icon.

  .ionic_ratings .icon {
    font-size: 50px;
  }

##Screen Shots:

Once you are successfully done with the above steps, you should be able to see the below screen shots.

ionic-ratings buttons

##Versions:

1) v0.1.0

The whole ionic-ratings component functionality has been implemented, and it can be installed with the command bower install ionic-ratings --save

##License:
MIT

##Contact:
gmail : rajeshwar.patlolla@gmail.com

github : https://github.com/rajeshwarpatlolla

twitter : https://twitter.com/rajeshwar_9032

facebook : https://www.facebook.com/rajeshwarpatlolla

paypal : rajeshwar.patlolla@gmail.com


Prompt users to rate your app with ng-special-offer
Rating control in ui-bootstrap not working on ionic
Angular-Star-Rating-Component in modal
Rating bars in list with stars
Star-like rating component?
#2

nice work. Can this component be disabled manually?


#3

There is no such option to disable this component. Thanks for this idea. I will implement this feature in the next release.


#4

Also I found that when I click a star twice, it will change to one star. I don’t know it was designed to this or a bug…


#5

Yes, it’s part of the functionality. If you give minimum rating as 1, and if you select 4 stars first and again if you click on the fourth star again, it will select only 1 star. Because the minimum rating is 1 star.


#6

This feture has been implemented in the new version v0.2.0. Please use this new version.


#7

Great component @rajeshwarpatlolla. Thanks for sharing your work.

I will use it for collecting ratings, and it’s perfect. The ideal would be to be able to use it to display ratings as well; in the display use case, I need the component disabled and able to show non integer ratings, say “4.5”. If I set rating=4.5 I get this:


#8

It does not support decimal ratings for now.


#9

I made a project that can be used either for rating input or output and
supports 0.5 star step. It’s really primitive but I hope it is help full:


#10

Nice work @pepemakis. Will use it in the next iteration of the project I’m working on. Thanks for sharing your work and posting!


#11

Hi Everyone, i am trying to list all the ionic framework plugins in a single repository. I had spent lot of time in getting all these plugins into one location, which hopefully should save so much of time of people who like to find one. I have added as many as i can. If you feel that i missed any plugin, please feel free to make a PR or raise an issue with the details of the plugin.

At https://github.com/rajeshwarpatlolla/ionic-plugins, you can find the list of all ionic plugins


#12

Hi I am new for ionic.
I am working with ionic 2 RC0 I need star rating plugin with a support of ionic 2. could you please share the project.


#13

This is specific to ionic v1. You can soon expect it for ionic v2 also.


#14

very useful and geniously way to solve it haha, thanks!