rajeshwarpatlolla / Ionic Ratings

##Introduction:

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

View plunker Demo

View codepen Demo

##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.min.js"></script>
or
<script src="lib/ionic-ratings/src/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',    //Optional
        iconOff: 'ion-ios-star-outline',   //Optional
        iconOnColor: 'rgb(200, 200, 100)',  //Optional
        iconOffColor:  'rgb(200, 100, 100)',    //Optional
        rating:  2, //Optional
        minRating:1,    //Optional
        readOnly: true, //Optional
        callback: function(rating, index) {    //Mandatory
          $scope.ratingsCallback(rating, index);
        }
      };
  
      $scope.ratingsCallback = function(rating, index) {
        console.log('Selected rating is : ', rating, ' and the index is : ', index);
      };

}])

The properties of are as follows.

a) iconOn (Optional) : You can give any icon from ionicons. This icon will be shown when the icon is active. Default value is ion-ios-star.

b) iconOff (Optional) : You can give any icon from ionicons. This icon will be shown when the icon is inactive. Default value is ion-ios-star-outline.

c) iconOnColor (Optional) : 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. The default value is rgb(200, 200, 100).

d) iconOffColor (Optional) : 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. The default value is rgb(200, 100, 100).

e) rating (Optional) : You can pass any values starting from 0. This is the initial/default rating. Default value is 0.

f) minRating (Optional) : You can pass any values starting from 0. This is the minimum value a user can select. Default value is 0.

g) readOnly (Optional) : This takes two values. If you wish to make it read only, give true or else you can give false. Default value is false. If you wish to make it read only please add the below css class to your css file.

  .ionic_ratings .read_only {
    pointer-events:none !important;
  }

h) callback (Mandatory) : This will be called when the user selects a rating. You can get the selected rating in this callback function.

5) In your template you can use like below

Without ng-repeat

<ionic-ratings ratingsobj='ratingsObject' index='0'></ionic-ratings>

Within ng-repeat

<ionic-ratings ratingsobj='ratingsObject' index='$index'></ionic-ratings>

index : This is mandatory property which will help to get the index of the selected item, if this is used in side ng-repeat. This will be sent in the callback function. The value of the index is zero based similar to $index.

##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

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.

##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

2) v0.2.0

Read only feature added.

3) v0.3.0

New feature

##License: MIT

##Contact: gmail : [email protected]

github : https://github.com/rajeshwarpatlolla

twitter : https://twitter.com/rajeshwar_9032

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

paypal : [email protected]

Comment or rate it : http://market.ionic.io/plugins/ionicratings