An angularjs directive that take care of visualising a star rating bar, build for ionic.
Also able to print half star (display only) :
angular-ui has the same rating directive,
but it is build on top of bootstrap. This repo just reuse most of the js code, but build for
the ionic framework.
Install with bower:
$ bower install ionic-rating
In your index.html
<script src="lib/ionic-rating/ionic-rating.min.js"></script>In you template:
<rating ng-model="rating.rate" max="rating.max"></rating>In you controller:
// first inject it into your app
angular.module('youApp', ['ionic.rating'])
.controller('yourCtrl', function($scope) {
// set the rate and max variables
$scope.rating = {};
$scope.rating.rate = 3;
$scope.rating.max = 5;
});For strict-di, you can use
.controller('RatingController', [ '$scope', '$attrs', 'ratingConfig', function($scope, $attrs, ratingConfig) ]
If you want to make it read only
added readonly="readOnly" to rating directive, and $scope.readOnly = true; to the controller.
If you want to customize star icons, you can override custom-star-icon class like below
.custom-star-icon {
font-size: 64px;
color : red;
}Note: You may also need to include the style file. But I suggest you just copy it to your project.
$ npm i
$ make all
MIT