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!

Answer 2

Someone give me an answer on the ionic forum, I change it a little, so now it's like that :

app.js routing =>

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

controllers.js controller =>

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

playlists.html =>

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

playlist.html =>

<ion-view view-title="Playlist">
  <ion-content>
    <h1>Playlist {{ title }}</h1>
  </ion-content>
</ion-view>

I will use a service for that in a true app, but this one is for training...

Thanks all for your reply, and if someone have a better proposal, post it !

Answer 3

Supposing you haven't done so much on the basic template you either:

1) copy that playlists array to your playlist controller (you would have to build that one and show the correct title based on the :playlistId passed via url. bad practice

2) share the data using a service

3) pass the title via state params from here

$stateProvider
  .state('home', {
    url: "/home",
    templateUrl: 'tpl.html',
    params: { playListTitle: null, }
  })

Not tested. Just using some infos from previous experience