2016-02-10 1 views
1

comment allez-vous. J'applique une cote à IONIC, bien que ce soit essentiellement angulaire. Je veux obtenir la valeur pour chaque catégorie. si je qualifie la rubrique "animaux", je veux obtenir la valeur que j'ai choisie. si je qualifie des "voitures", je veux obtenir la valeur que j'ai choisie.obtenir différentes valeurs dans le nombre d'étoiles

Mon problème est que j'ai toujours la même valeur pour les deux catégories. Que puis-je faire?. Je veux savoir quelle est la meilleure solution parce que je pense que la création de code dynamique et ne veulent pas répéter le code dans n catégories.

http://plnkr.co/edit/1PomwzklGD2Y8esbsnxT?p=preview

HTML

What do you think about the animals? 
<ionic-ratings ratingsobj='ratingsObject'></ionic-ratings> 
What do you think about the cars?? 
<ionic-ratings ratingsobj='ratingsObject'></ionic-ratings> 

JAVASCRIPT

$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: 4, //Optional 
minRating: 1, //Optional 
readOnly:false, //Optional 
callback: function(rating) { //Mandatory  
$scope.ratingsCallback(rating); 
} 
}; 

$scope.ratingsCallback = function(rating) { 
$scope.cars=rating; 
$scope.animals=rating; 
console.log('Selected rating is : ', rating); 

//is the same value :(
console.log("animals: "+$scope.animals); 
console.log("cars: "+$scope.cars); 
}; 

Répondre

0

Je suggère d'utiliser une autre bibliothèque de notation ionique comme this one qui permet l'utilisation de ng-model. Vous pouvez donc utiliser ng-repeat avec un tableau en tant que modèle, puis lier la directive <rating> à une propriété automatiquement mise à jour lorsque l'utilisateur définit l'évaluation.

Ci-dessous est votre exemple adapté pour utiliser cette lib et dynamisées:

angular.module('ionicApp', ['ionic', 'ionic.rating']) 
 

 
.controller('MyCtrl', function($scope) { 
 
    $scope.myTitle = 'IONIC RATINGS DEMO'; 
 

 
    $scope.categories = [{ 
 
    name: "animals", 
 
    question: "What do you think about the animals?", 
 
    rating: 0 
 
    }, { 
 
    name: "cars", 
 
    question: "What do you think about the cars?", 
 
    rating: 0 
 
    }, { 
 
    name: "flowers", 
 
    question: "What do you think about the flowers?", 
 
    rating: 0 
 
    }]; 
 

 
    $scope.rating = {}; 
 
    $scope.rating.max = 5; 
 

 
});
<!DOCTYPE html> 
 
<html ng-app="ionicApp"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
 
    <link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet"> 
 
    <script src="http://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script> 
 
    <script src="https://rawgit.com/fraserxu/ionic-rating/master/ionic-rating.js"></script> 
 
    <link rel="stylesheet" href="https://rawgit.com/fraserxu/ionic-rating/master/ionic-rating.css"> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-controller="MyCtrl"> 
 

 
    <ion-view> 
 
    <h1 class="text-center">{{myTitle}}</h1> 
 
    <div class="list"> 
 
     <div class="item item-button-right" ng-repeat="category in categories"> 
 
     {{category.question}} 
 
     <rating ng-model="category.rating" max="rating.max"></rating> 
 
     </div> 
 
    </div> 
 

 
    <pre>categories = {{categories|json}}</pre> 
 
    </ion-view> 
 
</body> 
 

 
</html>

P.S .: dans la balise <pre> est montré que le modèle uniquement pour le débogage et démonstration.