State Parameters and More Scope

In my last post I explained $scope a bit, in this post we expand on that and start manipulating scope along side the $stateParams. State Parameters are initially defined in the app.js file, right now we are interested in one in particular.

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

If you look at the url, you will notice something odd about the playlistId. A colon (the punctuation mark, kind of colon) precedes it, what is basically going to happen is; the last bit of the url will be assigned to a variable called playlistId.

Remember this line?

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

Notice anything about the href? {{playlist.id}} is pulled from scope and used to create the url for that specific playlist. Then you can use $stateParams to include that id as a dependency, which then can be assigned to the $scope. How you take advantage of this is up to you, but I'm going to do something simple for demonstrative purposes. We are going to create an array of playlists and shift the id numbers of the Playlists so they are array friendly (start at zero).

The easier part is shifting id numbers, in app.js we are going to do this:

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

If my reasoning doesn't make sense now, it will later, hopefully. First, we need to create some playlists. Of course, whoever created this template doesn't know good music so I'm going to just copy paste fake song names... except for the cowbell playlist, I've got that covered.

So let's populate the playlist controller with actual playlists.

.controller('PlaylistCtrl', function($scope, $stateParams) {
  $scope.playlistSet = [
    [
      { track: '1', artist: 'Whoever'},
      { track: '2', artist: 'Whatever'},
      { track: '3', artist: 'Whenever'},
      { track: '4', artist: 'Whomever'}
    ],
    [
      { track: '1', artist: 'Whoever'},
      { track: '2', artist: 'Whatever'},
      { track: '3', artist: 'Whenever'},
      { track: '4', artist: 'Whomever'}
    ],
    [
      { track: '1', artist: 'Whoever'},
      { track: '2', artist: 'Whatever'},
      { track: '3', artist: 'Whenever'},
      { track: '4', artist: 'Whomever'}
    ],
    [
      { track: '1', artist: 'Whoever'},
      { track: '2', artist: 'Whatever'},
      { track: '3', artist: 'Whenever'},
      { track: '4', artist: 'Whomever'}
    ],
    [
      { track: '1', artist: 'Whoever'},
      { track: '2', artist: 'Whatever'},
      { track: '3', artist: 'Whenever'},
      { track: '4', artist: 'Whomever'}
    ],
    [
      { track: 'Honky Tonk Women', artist: 'The Rolling Stones'},
      { track: 'Were an American Band', artist: 'Grand Funk Railroad'},
      { track: 'Dont Fear the Reaper', artist: 'Blue Oyster Cult'},
      { track: 'Hair of the Dog', artist: 'Nazareth'},
    ]
  ];
  $scope.id = $stateParams.playlistId;
});

$scope.playlistSet is made up of an array, of arrays, of objects. And you will also notice how we used the playlistId to create $scope.id. We need that id to pick the right array to list in the playlist window.

The next part is to display all of that information using a small bit of HTML:

<ion-view view-title="Playlist">
  <ion-content>
    <ion-list ng-repeat="playlist in playlistSet[id]">
<ion-item>Track: {{playlist.track}} <br/> By: {{playlist.artist}}</ion-item>
</ion-list>
  </ion-content>
</ion-view>

That's what our playlist.html file looks like. What's happening is ng-repeat looks at each item in the array located at playlistSet[id]. The id chooses the appropriate set of songs, and then goes through the array of songs and lists the track and artist.

Here's a little walk through to help out, in case something didn't quite make sense.
 


You can get the app from my screencast here.