Link to details page in a list not working

@xsantola wrote:

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.

Posts: 5

Participants: 2

Read full topic