Keeping json id in new link


#1

I am using an ng rpeat to get a list view from my returning json

<ion-list>
  <ion-item ng-repeat="category in feeds_categories"
        class="item-thumbnail-left item-icon-right"
        ui-sref="app.details">
    <img class="glow-pic" ng-src="{{category.image}}">
    <h2>{{category.title}}</span></h2>
    <p>{{category.listing}}</p>
    <p><small>{{category.distance}} Miles</small></p>
    <i class="icon ion-chevron-right"></i>
  </ion-item>
</ion-list>

When I click on the listing it takes takes me to the details page for that listing, I haven’t been able to figure out how to link this details page to the listing id so i can use the other returning json objects to populate this details and have it correspond to the reffering id.

Any help would be greatly appreciated


#2

As you did not show how your app.details state is defined, I’m guessing it could be:

ui-sref="app.details({ id: category.listing.id })"

Or category.id as you did not explain your objects


#3
 .state('app.details', {
url: "/details",
views: {
  'menuContent': {
    templateUrl: "details.html",
    controller: 'DetailsCtrl'
  }
}

#4

See the :id in url.

.state('app.details', {
    url: "/details/:id",
    views: {
      'menuContent': {
        templateUrl: "details.html",
        controller: 'DetailsCtrl'
      }
    }

May I suggest that you should read angular-ui router docs?


#5

Thank you for the start, I’ll do some more research, haven’t been able to get it working yet. Somewhere on the details page it is not loading in the json for the referring id


#6

@gmarziou They just keep coming :smile:

@lkpttrsn Take a look at this tutorial: http://www.gajotres.net/ionic-framework-tutorial-5-master-detail-pattern/ It’s a showcase for Master Detail pattern in Ionic, it will also provide a working example. You can also find other tutorials under the Table of Contents.


#7

Thanks! I got it working yesterday. It’s ugly but the dog is hunting, I’ll read over your your materials, appreciate the info.


#8

Great tutorial, nailed it.