Comments (5)
In the ionic-rating.js, change the following:
At the scope, add index: '=index'
scope: {
ratingsObj: '=ratingsobj',
index: '=index'
},
At the call to the Callback, add the "index" parameter (2 places)
scope.ratingsObj.callback(scope.index, scope.rating);
In your HTML file, define the index parameter inside the ng-repeat like:
In your js file, add the index parameter to the callback definition:
$scope.ratingsObject = {
callback: function(id, rating) {
$scope.ratingsCallback(id, rating);
}
};
and the callback itself:
$scope.ratingsCallback = function(id, rating) {
console.log('Rating of ' + id + ' is : ', rating);
};
from ionic-ratings.
Hi dude, i put the ionic-ratings inside ion-slide, but i want to update de rating value every time the slide has changed (I'm getting the 'avg' value form my DB), How can I change the value of avg every time you change the slide?
$scope.ratingsObjectAvg = {
iconOn: 'ion-ios-star',
iconOff: 'ion-ios-star-outline',
iconOffColor: 'rgb(200, 200, 100)',
iconOnColor: 'rgb(255, 255, 255)',
rating: avg,
minRating: 1,
readOnly: true,
callback: function (rating, index) {
$scope.ratingsCallback(rating, index);
}
};
from ionic-ratings.
Its working for me what should you do
In Your ionic-ratings tag add rating field and then change the code of rating controller as following:
<ionic-ratings ratingsobj='ratingsObject' rating='3' index='0' ></ionic-ratings>
And In Your Controller Add the Code which is following:
scope: { ratingsObj: '=ratingsobj', index: '=index', rating: '=rating'
},
link: function(scope, element, attrs) {
//Setting the default values, if they are not passed
scope.iconOn = scope.ratingsObj.iconOn || 'ion-ios-star';
scope.iconOff = scope.ratingsObj.iconOff || 'ion-ios-star-outline';
scope.iconOnColor = scope.ratingsObj.iconOnColor || 'rgb(200, 200, 100)';
scope.iconOffColor = scope.ratingsObj.iconOffColor || 'rgb(200, 100, 100)';
//scope.rating = scope.ratingsObj.rating || 0;
scope.minRating = scope.ratingsObj.minRating || 0;
scope.readOnly = scope.ratingsObj.readOnly || false;
scope.index = scope.index || 0;
scope.rating = scope.rating || 0;
//Setting the color for the icon, when it is active
scope.iconOnColor = {
color: scope.iconOnColor
};
//Setting the color for the icon, when it is not active
scope.iconOffColor = {
color: scope.iconOffColor
};
//Setting the rating
scope.rating = (scope.rating > scope.minRating) ? scope.rating : scope.minRating;
//Setting the previously selected rating
scope.prevRating = 0;
//scope.$watch('ratingsObj.rating', function(newValue, oldValue) {
scope.$watch('rating', function(newValue, oldValue) {
setRating(newValue);
});
function setRating(val, uiEvent) {
if (scope.minRating !== 0 && val < scope.minRating) {
scope.rating = scope.minRating;
} else {
scope.rating = val;
}
scope.prevRating = val;
if (uiEvent) scope.ratingsObj.callback(scope.rating, scope.index);
}
//Called when he user clicks on the rating
scope.ratingsClicked = function(val) {
setRating(val, true);
};
//Called when he user un clicks on the rating
scope.ratingsUnClicked = function(val) {
if (scope.minRating !== 0 && val < scope.minRating) {
scope.rating = scope.minRating;
} else {
scope.rating = val;
}
if (scope.prevRating == val) {
if (scope.minRating !== 0) {
scope.rating = scope.minRating;
} else {
scope.rating = 0;
}
}
scope.prevRating = val;
scope.ratingsObj.callback(scope.rating, scope.index);
};
}
};
}`
So It will display different stars
<div class="rate-right" ng-repeat="order in orders" ><ionic-ratings ratingsobj='ratingsObject' rating='order.rt_rate' index='0' ></ionic-ratings></div>
from ionic-ratings.
In order to create multiple rating for multiple user for example, try the folloing :
create a factory that return your rating object:
.factory('RatingsFactory', function($http) {
// instantiate our initial object
var RatingsFactory = function(rating) {
this.rating = rating;
};
RatingsFactory.prototype.getRatingObj = function() {
return {
iconOn: 'ion-ios-star', //Optional
iconOff: 'ion-ios-star-outline', //Optional
iconOnColor: 'rgb(215, 186, 25)', //Optional
iconOffColor: 'rgb(215, 186, 25)', //Optional
minRating: 1, //Optional
rating:this.rating,
readOnly: false, //Optional
callback: function (rating, index) { //Mandatory
ratingsCallback(rating, index);
}
};
function ratingsCallback (rating, index) {
console.log('Selected rating is : ', rating, ' and the index is : ', index);
};
};
return RatingsFactory;
})
Then in your controller :
$scope.users = [{name:'Monsif Mabrouk',price:12,img:'/img/ben.png',ratingsObject:new RatingsFactory(5).getRatingObj()}
,{name:"Monsif Mabrouk",price:12,img:"/img/ben.png",rating:3,ratingsObject:new RatingsFactory(1).getRatingObj()}]
And finally your html should look like this :
<ion-list>
<ion-item class="item-avatar " ng-repeat="item in users" >
<img src="{{item.img}}" />
<h2>{{item.name}}</h2>
<ionic-ratings ratingsobj="item.ratingsObject" index='0'></ionic-ratings>
</ion-item>
</ion-list>
from ionic-ratings.
In order to create multiple rating for multiple user for example, try the folloing :
create a factory that return your rating object:.factory('RatingsFactory', function($http) { // instantiate our initial object var RatingsFactory = function(rating) { this.rating = rating; }; RatingsFactory.prototype.getRatingObj = function() { return { iconOn: 'ion-ios-star', //Optional iconOff: 'ion-ios-star-outline', //Optional iconOnColor: 'rgb(215, 186, 25)', //Optional iconOffColor: 'rgb(215, 186, 25)', //Optional minRating: 1, //Optional rating:this.rating, readOnly: false, //Optional callback: function (rating, index) { //Mandatory ratingsCallback(rating, index); } }; function ratingsCallback (rating, index) { console.log('Selected rating is : ', rating, ' and the index is : ', index); }; }; return RatingsFactory; })
Then in your controller :
$scope.users = [{name:'Monsif Mabrouk',price:12,img:'/img/ben.png',ratingsObject:new RatingsFactory(5).getRatingObj()} ,{name:"Monsif Mabrouk",price:12,img:"/img/ben.png",rating:3,ratingsObject:new RatingsFactory(1).getRatingObj()}]
And finally your html should look like this :
<ion-list> <ion-item class="item-avatar " ng-repeat="item in users" > <img src="{{item.img}}" /> <h2>{{item.name}}</h2> <ionic-ratings ratingsobj="item.ratingsObject" index='0'></ionic-ratings> </ion-item> </ion-list>
Where to add factory code?
from ionic-ratings.
Related Issues (20)
- Lowering rating causes a 6th star to appear HOT 1
- Android 4.3 and previous, clicking does not work. HOT 1
- flicker on safari when clicked HOT 3
- TypeError: Cannot read property 'iconOn' of undefined HOT 5
- "No Rating" is not available HOT 1
- passing the rates to firebase HOT 1
- remove completely HOT 1
- Reset Ionic star rating
- Problem with Android 4.2.2 HOT 1
- Shadow appearing while selecting rating in iOS
- How can i set a custom image in iconOn and iconOff? HOT 1
- Show Half star HOT 2
- Can't show dynamically multiple ratings HOT 2
- 'required' stars validator
- typescript and js
- Bugs in default value for attribute 'rating' and 'minRating' HOT 4
- Alignment HOT 3
- Rating not clickable on HTC and Samsung HOT 1
- rating 0 not working HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ionic-ratings.