Can't get the playlist.title to display in starter template

I am using the starter template to kickoff a project and in playing around with the code, I cannot for the life of me get the title or id to display correctly in the playlist.html file.

I have this in my playlists.html file…

<ion-view title="Playlists">
  <ion-content class="has-header">
    <ion-list show-delete="data.showDelete">
      <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.title}}">
        {{playlist.title}}
          <ion-delete-button class="ion-minus-circled"
                 ng-click="playlists.splice($index, 1)">
          </ion-delete-button>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

and I have this in my playlist.html file

<ion-view title="Ticket: {{ playlist.title }}">
  <ion-content class="has-header" padding="true">
    <h1>Playlist</h1>
      <p>{{ playlist.title }}</p>
  </ion-content>
</ion-view>

It should display the information that is attached to the playlist, but it just shows the <h1> element.

Any help would be hugely appreciated as I have burned a couple of hours dancing around what is probably an easy solution.

Thank you for your time.

Chuck

Just wanted to bump this to see if anyone can provide me with some direction.

Thank you.
Chuck

May you make a codepen or something like that with your whole page?

@bengtler Thank you for the reply. I am not sure how to add it to codepen since there are two views and codepen only allows one html file. The project i am using is the sample ‘$ionic start myApp sidebar’ - where you have the playlist. When you click on a selection in the playlist, i.e. reggae, soul etc… it takes you to playlist.html view, but the view is the same for each selection. What I want to do as you can see above is create content specific to the playlist selection and insert data such as {{ playlist.title }}. I am assuming that is what is is supposed to do, but I am sure I need to specify something in the $scope. I will play around with codepen and see if I can get it working, but if you have a second to fire up a new ionic project ‘$ionic start myApp sidebar’ and test it, you’ll notice what I am talking about.

Thank you again for jumping in to lend a hand…

Best,
Chuck

Do you have a nav-view ?
http://ionicframework.com/docs/api/directive/ionNavView/

If you use this with

<ion-nav-bar></ion-nav-bar>

The title will automatically add in the navbars title section.

I do, but its not the page title I am looking to add, its a variable from the playlists file. It will probably be easier for you to see once I get it up on Codepen. Thank you again for your help…

Chuck

Ah okay… that will not work -> you change your state and that causes a new scope for your view.

If your playlist view is not a subview of your playlists view you can not access the scope.variables/functions of playlists controller.

You could but it ugly on the rootscope or get the playlist information again in your playlist controller.

Greetz.

Was there ever a solution for this?

What would be the best way to achieve this?

You are able to store such data in services -> your list fetches all data from a datasource. Saves the content in the service (an array or object)

Example urls:
/playlists -> lists
/playlists/:index -> detail view with a parameter index which matches the klicked index of the item in your playlist list array.

Now you can use your service in the detailview and load the data of the list you want.
Another approach:

Use abstract states:
Now you have 3 states

  1. abstract parent state -> controller which loads data from the datasource - url: /playlist
    this state has a template with a ion-nav-view in it
  2. list state -> uses the ion-nav-view provided from the abstract parent state - url /playlist/list
  3. detail state -> uses the ion nav view provided from the abstracht parent state - url /playlist/detail

The second and third state needs no own controller … only templates to show data the abstract parent state has loaded.
The second approach gives you the possibility to support hard state reloads, because the parent controller is loaded and the the list or detail page.

If you use the first approach and make a hard reload on the detail page -> your service data are gone :wink:
Should not be happened in a mobile app but it is possible in a webapp (ordinary page reload/refresh).

Greetz, bengtler

@bengtler
I understand the logic, but somehow can get to display data from the clicked item of parent state in detail state. By any chance would you be able to provide an example ?

Laurent