各状態の配列からイオンを使ってタイトルを表示する方法は？

Question

私はionicでプレイリストアプリを作ろうとしていますが、私はタイトルごとにidで各状態を表示したいと考えています（これはイオン性のsidemenuテンプレートからの初心者アプリです。 ：

app.jsルーティング=>

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

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> 

だから私は、私は良い方法を使用していないと思いますが、私は唯一の配列で、NG-バインドとngのコントローラで、多くのことを試してみましたメイン状態に

• （playlists.html）：イオンリストとアイテムが、何も最初のコントローラは、

  あなたは私がやろうかを理解しやすくするために動作するようです...音楽性別プレイリスト（controllers.jsのリスト）ここで、リストの各要素をクリックすることができます。

• 要素をクリックすると、最初のPlaylist Reggae、Playlist Chillのような状態のタイトルに続く「Playlist」の状態（playlist.html）に到着します。第二1、...

しかし、私は与えるこのコードは、各タイトルは、それぞれの状態に重畳されていると...他のいくつかのコードで

のために、私はそれぞれにプレイリストレゲエを持ってする方法を見つけます状態、しかしそれは良くない、または私は各状態のそれぞれの要素の前にも、プレイリストという言葉で全リストを持っていることが分かります。あなたはどちらかの基本的なテンプレートにはあまり行っていないと仮定すると

Answer 1

パラメータのタイトルは、タイトルでうまくいきます。 しかし、あなたはすべてのプロパティだけでなく、タイトルにアクセスできるようにするのparamで全体のプレイリストのオブジェクトを送信できます。=>

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

controllers.jsコントローラ=>

を追加ルーティング

app.jsを

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

playlists.html変化=>

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

PL aylist.html =>

あなたは、必要に応じて、プレイリストのタイトルをイオンビューのタイトル属性内で使用できます。

Answer 2

：

1）あなたのプレイリストコントローラにプレイリストの配列は、（あなたが1つの構築とに基づいて正しいタイトルを表示しなければならないことをコピーします。 URL経由で渡さplaylistId。悪い習慣

2）サービス

3を使用してデータを共有する）from here

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

のparams状態を経由してタイトルを渡します

テストされていません。ただ、

Answer 3

誰かが私にイオンフォーラムで答えを出すまでの経験からいくつかに関する情報を使用して、私はそれを少し変更し、今ではそのようなものだ：

app.jsルーティング=>

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

コントローラ。JSコントローラ=>

.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> 

私は本当のアプリでそのためのサービスが、このいずれかを使用しますトレーニングのためのものです...

返信いただきありがとうございます。誰かがより良い提案をしていただければ投稿してください！