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

ionic-v1
1

Hi everyone,

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 :

controllers.js =>

.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 screen (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 screen (playlist.html) where is only the word “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 (screen)…

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

I’m on it since yesterday without any solution but with less hair !

Thanks in advance…

2

Ok… to achieve this for test purposes you can do it like this:

controllers.js

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

app.js

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

playlist.html

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

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>

this is the result:

image
Untitled.png353×620 3.83 KB

But if you are gonna go further with this, the ‘correct’ way is to make the Playlist a service and access it from any controller I believe.

3

Thanks for your quick reply, it’s not working correctly on my computer, but a part of it : it’s showing the id in place of the title…

But it’s much better than my bad solution, so I will try to find the good way with your solution code !

4

I’m so sorry, my bad. I forgot to paste this:

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>

In the parameter now you’ll change to playlist.title
I edited my last post for further users, that is the complete code for what you want.
But again, if you are gonna use that a lot, you should consider doing a service that holds all the playlists info and every controller that needs it can access from there. This way you’ll need only the ID to get all the info you want from a certain playlist.

5

Thanks a lot, it’s working now ! :grin:

And I found how to let the app.js like it was, with “:playlistId” :

  • in the controllers.js => “$scope.title = $stateParams.playlistId;”
  • in the playlist.html => “{{ title }}”.

But I saw in the Firefox Inspector that the id became the title in the url with the 2 ways, so it’s exactly the same…

And many thanks for your tips about the service, I will do it the next time ; this app is for learning the framework.

6

Yeah, the change I made in the app.js is just to avoid name inconsistency. The thing you are passing through is not the Id anymore, it’s now the name. But it works both ways.

You are welcome :smile: