How to show a title from an array in each state with ionic?

Question

I'm trying to make a playlist app with ionic, and I would like to show on each state by id the title (this is a starter app from ionic sidemenu template, without many changes from the beginning), here is the code :

app.js routing =>

 .state('app.single', {
  url: '/playlists/:playlistId',
  views: {
   'menuContent': {
     templateUrl: 'templates/playlist.html',
     controller: 'PlaylistCtrl'
    }
  }
})

controllers.js controller =>

.controller('PlaylistsCtrl', function($scope) {
  $scope.playlists = [
    { title: 'Reggae', id: 1 },
    { title: 'Chill', id: 2 },
    { title: 'Dubstep', id: 3 },
    { title: 'Indie', id: 4 },
    { title: 'Rap', id: 5 },
    { title: 'Cowbell', id: 6 }
  ];
})

.controller('PlaylistCtrl', function($scope, $stateParams) {
  $scope.playlists = [
    { title: 'Reggae', id: 1 },
    { title: 'Chill', id: 2 },
    { title: 'Dubstep', id: 3 },
    { title: 'Indie', id: 4 },
    { title: 'Rap', id: 5 },
    { title: 'Cowbell', id: 6 }
  ];
})

playlists.html =>

    <ion-view view-title="Playlists">
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
        {{playlist.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

playlist.html =>

    <ion-view view-title="Playlist">
  <ion-content ng-repeat="playlist in playlists">
    <h1>Playlist {{playlist.title}}</h1>
  </ion-content>
</ion-view>

So I think that I don't use the good way, but I tried many things, with ng-bind and ng-controller, with the array only in the first controller, with ion-list and item, but nothing seems to work...

To help you understand what I try to do :

• on the main state (playlists.html) is a music gender playlist (the list in controllers.js) where it's possible to click on each element of the list;

• when we click on an element, we arrive on a state (playlist.html) where is only the "Playlist" follow by the title of the state from the id, like Playlist Reggae for the first one, Playlist Chill for the second one, ...

But with this code I give, each title are superimposed on each state...

With some other code, I find how to have Playlist Reggae on each state, but that's not good, or I find to have the whole list with the word Playlist before each element on each state too, not good!!

Answer 1

The title by parameter will work just fine for the title. But you could send the whole playlist object by param to be able to access all the properties and not just the titles:

app.js routing add =>

.state('app.single', {
  url: '/playlist',
  params: {
     playlist: null
  },
  views: {
    'menuContent': {
      templateUrl: 'templates/playlist.html',
      controller: 'PlaylistCtrl'
    }
  }
})

controllers.js controller =>

.controller('PlaylistCtrl', function($scope, $stateParams) {
   $scope.playlist = $stateParams.playlist;
});

playlists.html change =>

<ion-item ng-repeat="playlist in playlists" ui-sref="app.single({playlist: playlist})">
  {{playlist.title}}
</ion-item>

playlist.html =>

    <ion-view view-title="Playlist">
    <!-- <ion-view view-title="{{ playlist.title }}"> -->
      <ion-content>
        <h1>Playlist {{ playlist.title }}</h1>
        <p>{{ playlist.description}}</p>
      </ion-content>
    </ion-view>

BTW you can use the playlist's title inside the ion-view title attribute if you want!