ionic ratings

ionic ratings

A ratings bower component for ionic apps

Free!

(4)
Rajeshwar

Rajeshwar

Member since 2014

Details

Version:
0.1.0
Size:
0mb
Ionic:
1.0.0,1.0.1
Platforms:
iOS, Android
Released:
9 years ago
Updated:
9 years ago
Category:
Plugins
Tags:
ionic-ratings, ionic, ratings

##Introduction:

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

View codepen Demo

View plunker 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.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

Hey there! You'll need to log in before you can leave a comment here.

Saurabh Sharma

Saurabh Sharma   ·   8 years ago

Will it be possible to do half rating with this plugin as what rateit.js doing?

Peter Bierman

Peter Bierman   ·   8 years ago

Thank you for the plugin, I just noticed you couldn't set the min-rating to 0. It would default to 1, checking your code this rule is the problem: scope.minRating = scope.ratingsObj.minRating || 1; If minRarting is 0 it will translate to 'false' and still set the minRating to 1. I fixed it by just setting the default value to 0, but could be something to look into.

karsten balgar

karsten balgar   ·   8 years ago

Thanks for the good work, i'm using it in a app for participation of unions. I got a question though: i toggle the rating component with a star icon, which works perfectly. Still i need to escape the voting when i click somewhere else than on the stars. Any idea how to do this?

endrit pepa

endrit pepa   ·   8 years ago

nice plugin but i try to install it and i have some problem the problem is on angular.js:12520 TypeError: Cannot read property 'iconOn' of undefined can you help me thanks

Zubin Raja

Zubin Raja   ·   8 years ago

How to reset rating on external event response?

shahrukh

shahrukh   ·   8 years ago

Good Plugin although when im trying to inject dependency 'ionic.rating' it is not working i have included the rating.js file

Rajeshwar

Rajeshwar   ·   8 years ago

@shahrukh , Please check the demo.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Rajeshwar

Rajeshwar   ·   8 years ago

@shahrukh , Please check the demo.

shahrukh

shahrukh   ·   8 years ago

Good Plugin although when im trying to inject dependency 'ionic.rating' it is not working i have included the rating.js file

Zubin Raja

Zubin Raja   ·   8 years ago

How to reset rating on external event response?

endrit pepa

endrit pepa   ·   8 years ago

nice plugin but i try to install it and i have some problem the problem is on angular.js:12520 TypeError: Cannot read property 'iconOn' of undefined can you help me thanks

karsten balgar

karsten balgar   ·   8 years ago

Thanks for the good work, i'm using it in a app for participation of unions. I got a question though: i toggle the rating component with a star icon, which works perfectly. Still i need to escape the voting when i click somewhere else than on the stars. Any idea how to do this?

Peter Bierman

Peter Bierman   ·   8 years ago

Thank you for the plugin, I just noticed you couldn't set the min-rating to 0. It would default to 1, checking your code this rule is the problem: scope.minRating = scope.ratingsObj.minRating || 1; If minRarting is 0 it will translate to 'false' and still set the minRating to 1. I fixed it by just setting the default value to 0, but could be something to look into.

Saurabh Sharma

Saurabh Sharma   ·   8 years ago

Will it be possible to do half rating with this plugin as what rateit.js doing?

Hey there! You'll need to log in before you can leave a rating here.

Cato Gonzalez   ·     ·   9 years ago

Great component for collecting ratings. Thanks for sharing your work!

Ghulam Mustafa   ·     ·   8 years ago

it is not working with android devices

Steve Chactue Akono   ·     ·   8 years ago

Thanks for sharing your work!

Marc Camp   ·     ·   8 years ago

Nice but not working in some android devices!

  ·     ·   just now

{{ rating.comment }}

  ·     ·   just now

{{ rating.comment }}

Marc Camp    ·     ·   8 years ago

Nice but not working in some android devices!

Steve Chactue Akono    ·     ·   8 years ago

Thanks for sharing your work!

Ghulam Mustafa    ·     ·   8 years ago

it is not working with android devices

Cato Gonzalez    ·     ·   9 years ago

Great component for collecting ratings. Thanks for sharing your work!