Passing value from ng-repeat to AngularJS with Ionic

Question

I am new to Ionic so this may be a basic question.

I have an HTML file with the following code:

<ion-item class="item-remove-animate item-icon-right" href="#/editvenue/{{venueItem.id}}" 
  ng-repeat="venueItem in venue track by venueItem.id">
    <h2>{{venueItem.name}}</h2>
    <p>{{venueItem.phone}}</p>      
    <ionic-ratings ratingsobj='rating'></ionic-ratings>
</ion-item>

The is used to display star ratings using a custom directive. See details here: https://market.ionic.io/plugins/ionicratings. Below is part of the controller in app.js file that includes the code used to generate the stars.

    $scope.rating = {
      iconOn: 'ion-ios-star',    
      iconOff: 'ion-ios-star-outline',   
      iconOnColor: 'rgb(255, 215, 0)',  
      iconOffColor:  'rgb(224, 224, 224)',   
      rating: 0,//$scope.venueItem.overallrating, // NEED TO DEFAULT THIS TO A RATING???
      minRating: 0,    
      readOnly: true, // Set to true so user cannot edit rating
      callback: function(rating) {    //Mandatory
        // do nothing as read only stars 
      }
    };

I am trying to pass the overallrating value from the current venueItem variable as ng-repeat iterates through the list of venues back to the controller. The goal is to show the star ratings for each venueItem. I am trying to set rating to $scope.venueItem.overallrating but this isn't working.

Anik Islam Abhi · Accepted Answer · 2015-11-08 02:07:29Z

1

Try to add rating object with ng-repeat instance

Like this

<ionic-ratings ratingsobj='venueItem.rating'></ionic-ratings>

Assign this object

rating = {
      iconOn: 'ion-ios-star',    
      iconOff: 'ion-ios-star-outline',   
      iconOnColor: 'rgb(255, 215, 0)',  
      iconOffColor:  'rgb(224, 224, 224)',   
      rating: x.overallrating, // NEED TO DEFAULT THIS TO A RATING???
      minRating: 0,    
      readOnly: true, // Set to true so user cannot edit rating
      callback: function(rating) {    //Mandatory
        // do nothing as read only stars 
      }

With every object in the list $scope.venue

Like this

$scope.venue.forEach(function(x){
  x.rating= {
      iconOn: 'ion-ios-star',    
      iconOff: 'ion-ios-star-outline',   
      iconOnColor: 'rgb(255, 215, 0)',  
      iconOffColor:  'rgb(224, 224, 224)',   
      rating: x.overallrating, 
      minRating: 0,    
      readOnly: true, // Set to true so user cannot edit rating
      callback: function(rating) {    //Mandatory
        // do nothing as read only stars 
      }
   }
})

edited Nov 8, 2015 at 2:07

answered Nov 7, 2015 at 14:34

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

zeeshan Over a year ago

OK I added the function as you noted in my controller and it's now breaking, are you certain the code you provided is the correct syntax? Also, what variable should I be passing to the rating item instead of 0? The correct value is stored in venueItem.overallrating.

zeeshan Over a year ago

It worked after I removed the ; from the end of the callback function. As well, I used the x.overallrating value to populate the rating item. Thanks!

Collectives™ on Stack Overflow

Passing value from ng-repeat to AngularJS with Ionic

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related