ionic-ratings


##Introduction:

This is an ionic-ratings bower 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.

```html


or

``

##### 3) In your application module inject the dependency ionic-ratings, in order to work with it.

``javascript
angular.module('mainModuleName', ['ionic', 'ionic-ratings']){
//
}
``

##### 4) In your controller, please define the object which you need to pass to the directive.

``javascript
.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.

``css
.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

``html

``

Within ng-repeat

``html

``

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

!ionic-ratings icon on
!ionic-ratings icon off

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

``css
.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:

$3


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

$3

Read only feature added.

$3

New feature

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

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