Link to details page in a list not working

ionic-v1
1

Hi folks – I recently started a simple app listing beers and when you’d click on each item, you’d get to the details page of that given beer. I’ve ready tons of posts, articles, and what not… yet for whatever reason I can’t get it to work.

I have created an app with tabs, and the beers are listed under the ‘beers’ tab:

.state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
 })

.state('tab.beers', {
  url: '/beers',
  views: {
    'tab-beers': {
      templateUrl: 'templates/tab-beers.html',
      controller: 'BeersCtrl'
    }
  }
})

The details page is:

.state('tab.beer', {
url: '/beer/:id',
views: {
  'tab-beer-details': {
    templateUrl: 'templates/beer-details.html',
    controller: 'BeerDetailsCtrl'
    }
  }
})

In my templates/tab-beers.html I have the following list:

      <ion-list>
        <ion-item class="item-thumbnail-left item-icon-right"
          auto-list-divider auto-list-divider-value="{{ item.type }}" ng-repeat="item in beers" ng-href="#/tab/beer/{{ item.id }}">
      ...
      </ion-list>

I’ve also tried with ui-sref="tab.beer({id: item.id})" but without luck.

Must be something trivial… but I guess I can’t find the bug.

Thanks for your help guys.

-X.

2

Hi,

Can you share the code in tabs.html because maybe you forgot to create the ‘tab-beer-details’ view?
Try to change tab-beer-details to tab-beers.

3

Hi @Destroy – Thanks for your reply. Here’s the code. You might have caught it…

<ion-tabs class="tabs-icon-only tabs-color-active-positive">
  <ion-tab title="Brewery" icon-off="ion-home" icon-on="ion-home" href="#/tab/brewery">
    <ion-nav-view name="tab-brewery"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Beers" icon-off="ion-erlenmeyer-flask" icon-on="ion-erlenmeyer-flask" href="#/tab/beers">
    <ion-nav-view name="tab-beers"></ion-nav-view>
  </ion-tab>
  <ion-tab title="Contact" icon-off="ion-at" icon-on="ion-at" href="#/tab/contact">
    <ion-nav-view name="tab-contact"></ion-nav-view>
  </ion-tab>

</ion-tabs>
4

@Destroy – Changing it per your suggestion brings me slightly further… but I have a hard time to get the link work smoothly… fiddling around in the ios emulator gets me to the page at some point but only after clicking a bit everywhere and moving the pointer around on the app. On top of that the layout is broken, the top of the page does “under” the header, so not properly staying in the view I’m assuming…

5

I applied your code in code ped. here http://codepen.io/Vatsov/pen/XXaPgX
Is it what you are try to do?

6

@Destroy – Thanks that’s pretty much it. Will review and adapt my code. Thanks again, and nice brewery you chose in your example :wink:

7

Apparently it still gets a bit funky in BeerDetailsCtrl, locally. Investigating as to why now…

8

@Destroy – Alright, solved it all. Now trying to move the data into an online .json file that I’ll fetch using $http.get.

I have forked your codepen, and simply moved the beers data array into an online .json file. Unfortunately no luck there. For whatever reason it cannot fetch the data.

Any thoughts?

Thanks again.

-X.