{"id":21404040,"url":"https://github.com/rajeshwarpatlolla/ionic-ratings","last_synced_at":"2025-07-13T22:32:29.295Z","repository":{"id":35711076,"uuid":"39988925","full_name":"rajeshwarpatlolla/ionic-ratings","owner":"rajeshwarpatlolla","description":"'ionic-ratings' bower component for ionic framework applications","archived":false,"fork":false,"pushed_at":"2019-11-02T16:29:33.000Z","size":22,"stargazers_count":56,"open_issues_count":3,"forks_count":35,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-11-10T09:12:28.098Z","etag":null,"topics":["angularjs","hybridapp","ionic","ratings"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rajeshwarpatlolla.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"custom":["https://www.paypal.me/rajeshwarpatlolla/10"]}},"created_at":"2015-07-31T05:49:27.000Z","updated_at":"2024-04-18T11:01:26.000Z","dependencies_parsed_at":"2022-08-31T00:01:36.174Z","dependency_job_id":null,"html_url":"https://github.com/rajeshwarpatlolla/ionic-ratings","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajeshwarpatlolla%2Fionic-ratings","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajeshwarpatlolla%2Fionic-ratings/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajeshwarpatlolla%2Fionic-ratings/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajeshwarpatlolla%2Fionic-ratings/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rajeshwarpatlolla","download_url":"https://codeload.github.com/rajeshwarpatlolla/ionic-ratings/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225925618,"owners_count":17546276,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angularjs","hybridapp","ionic","ratings"],"created_at":"2024-11-22T16:12:21.394Z","updated_at":"2024-11-22T16:12:22.060Z","avatar_url":"https://github.com/rajeshwarpatlolla.png","language":"JavaScript","funding_links":["https://www.paypal.me/rajeshwarpatlolla/10"],"categories":[],"sub_categories":[],"readme":"[![bitHound Score](https://www.bithound.io/github/rajeshwarpatlolla/ionic-ratings/badges/score.svg)](https://www.bithound.io/github/rajeshwarpatlolla/ionic-ratings)\n\n##Introduction:\n\nThis is an `ionic-ratings` component which can be used with any Ionic framework's application.\n\n[View plunker Demo](http://plnkr.co/edit/YjpF7hqeMK0HGjeklc6z?p=preview \"plunker demo\") \n\n[View codepen Demo](http://codepen.io/rajeshwarpatlolla/pen/vOQJej \"codepen demo\") \n\n\n##Prerequisites.\n\n* node.js\n* bower\n* gulp.\n\n##How to use:\n\n##### 1) In your project repository install the `ionic-ratings` using bower\n\n    bower install ionic-ratings --save\n\nThis will install the latest version released.\n    \n##### 2) Give the path of  `ionic-ratings.js` in your `index.html` file.\n\n````html \n\u003c!-- path to ionic/angularjs js --\u003e\n\u003cscript src=\"lib/ionic-ratings/dist/ionic-ratings.min.js\"\u003e\u003c/script\u003e\nor\n\u003cscript src=\"lib/ionic-ratings/src/ionic-ratings.js\"\u003e\u003c/script\u003e\n````\n\n##### 3) In your application module inject the dependency `ionic-ratings`, in order to work with it.\n\n````javascript\nangular.module('mainModuleName', ['ionic', 'ionic-ratings']){\n //\n}\n````\n\n##### 4) In your controller, please define the object which you need to pass to the directive.\n\n````javascript\n.controller('ControllerName', ['$scope', function($scope) {\n   \n      $scope.ratingsObject = {\n        iconOn: 'ion-ios-star',    //Optional\n        iconOff: 'ion-ios-star-outline',   //Optional\n        iconOnColor: 'rgb(200, 200, 100)',  //Optional\n        iconOffColor:  'rgb(200, 100, 100)',    //Optional\n        rating:  2, //Optional\n        minRating:1,    //Optional\n        readOnly: true, //Optional\n        callback: function(rating, index) {    //Mandatory\n          $scope.ratingsCallback(rating, index);\n        }\n      };\n  \n      $scope.ratingsCallback = function(rating, index) {\n        console.log('Selected rating is : ', rating, ' and the index is : ', index);\n      };\n\n}])\n````\n\nThe properties of are as follows.\n\na) **iconOn** (Optional) : You can give any icon from [ionicons](http://ionicons.com/). This icon will be shown when the icon is active. Default value is `ion-ios-star`.\n\nb) **iconOff** (Optional) : You can give any icon from [ionicons](http://ionicons.com/). This icon will be shown when the icon is inactive. Default value is `ion-ios-star-outline`.\n\nc) **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)`.\n\nd) **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)`.\n\ne) **rating** (Optional) : You can pass any values starting from 0. This is the initial/default rating. Default value is `0`.\n\nf) **minRating** (Optional) : You can pass any values starting from 0. This is the minimum value a user can select. Default value is `0`.\n\ng) **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`.\nIf you wish to make it read only please add the below css class to your css file.\n\n````css\n  .ionic_ratings .read_only {\n    pointer-events:none !important;\n  }\n````\n\nh) **callback** (Mandatory) : This will be called when the user selects a rating. You can get the selected rating in this callback function.\n\n\n##### 5) In your template you can use like below\n\nWithout ng-repeat\n\n````html\n\u003cionic-ratings ratingsobj='ratingsObject' index='0'\u003e\u003c/ionic-ratings\u003e\n````\n\nWithin ng-repeat\n\n````html\n\u003cionic-ratings ratingsobj='ratingsObject' index='$index'\u003e\u003c/ionic-ratings\u003e\n````\n\n**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`.\n\n##CSS Classes:\nYou can customize font, width and height of the icons using these classes.\n##### 1) ionic_rating_icon_on\n##### 2) ionic_rating_icon_off\n\n![ionic-ratings icon on](https://lh3.googleusercontent.com/0eaBAyA98Xmz0DypNRFdQs7k_pz_HCJQT87XPoh8h1U=w397-h137-no \"ionic-ratings-icon-on\")\n![ionic-ratings icon off](https://lh3.googleusercontent.com/adoA1shQtGymzw72jKmN3p0Hv6P6jrYkbF7m7edhp_E=w402-h143-no \"ionic-ratings-icon-off\")\n\nYou can also use the following css class for changing the properties of each icon.\n\n````css    \n  .ionic_ratings .icon {\n    font-size: 50px;\n  }\n````\n\n##Screen Shots:\n\nOnce you are successfully done with the above steps, you should be able to see the below screen shots.\n \n![ionic-ratings buttons](https://lh3.googleusercontent.com/iUEJXbDYAAQK6xXmEA6FIRvRsKWLrFsrVjMGolsRn8E=w392-h130-no \"ionic-ratings\")\n\n##Versions:\n\n### 1) v0.1.0\nThe whole `ionic-ratings` component functionality has been implemented, and it can be installed with the command `bower install ionic-ratings --save`\n\n### 2) v0.2.0\nRead only feature added.\n\n### 3) v0.3.0\n[New feature](https://github.com/rajeshwarpatlolla/ionic-ratings/issues/10)\n\n\n##License:\n[MIT](https://github.com/rajeshwarpatlolla/ionic-ratings/blob/master/LICENSE.md \"MIT\")\n\n##Contact:\ngmail : rajeshwar.patlolla@gmail.com\n\ngithub : https://github.com/rajeshwarpatlolla\n\ntwitter : https://twitter.com/rajeshwar_9032\n\nfacebook : https://www.facebook.com/rajeshwarpatlolla\n\npaypal : rajeshwar.patlolla@gmail.com\n\nComment  or rate it : http://market.ionic.io/plugins/ionicratings\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frajeshwarpatlolla%2Fionic-ratings","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frajeshwarpatlolla%2Fionic-ratings","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frajeshwarpatlolla%2Fionic-ratings/lists"}