Question

我正在使用Ionic Lab来学习基础知识。我有一个初学者模板“Sidemenu”，这是一种几乎功能正常的音乐应用程序。它主要显示侧面菜单 - 工作正常，但有点恼人的应用程序的播放列表部分中包含的主 - 细节模式似乎只是部分设置。主（列表）视图使用数据数组，但详细信息视图仅使用HTML的通用硬编码位。必须非常容易更进一步，让主视图和详细视图从同一个数组中读取，在不同模板中显示不同的数据（已经设置好了，就像详细视图的控制器一样 - 但它是空的）..但我正在努力弄清楚正确的方法是什么。

有人可以指出我正确的方向吗？

列表视图：

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

详情视图：

<ion-view view-title="Playlist">
  <ion-content>
    <h1>Playlist</h1>
    <ion-item class="card">
        <div class="item item-text-wrap">
            {{playlist.title}}
            Bar
        </div>
        <div class="item item-text-wrap">    
            Foo
            {{playlist.content}}
        </div>
    </ion-item>
  </ion-content>
</ion-view>

app.js：

    .config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

   //... some other states here

    .state('app.playlists', {
      url: '/playlists',
      views: {
        'menuContent': {
          templateUrl: 'templates/playlists.html',
          controller: 'PlaylistsCtrl'
        }
      }
    })

  .state('app.single', {
    url: '/playlists/:playlistId',
    views: {
      'menuContent': {
        templateUrl: 'templates/playlist.html',
        controller: 'PlaylistCtrl'
      }
    }
  });
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/playlists');
});

controllers.js

    .controller('PlaylistsCtrl', function($scope) {
  $scope.playlists = [
    {
        content: 'Integer legentibus erat a ante historiarum dapibus.',
        title: 'Reggae',
        id: 1 
    },
    { 
        content: 'Pellentesque habitant morbi tristique senectus et netus.',
        title: 'Chill',
        id: 2 
    }
  ];
})

.controller('PlaylistCtrl', function($scope, $stateParams) {
    // empty, as it is by default, but I've tried adding data here and nothing happens
});

详细视图中的数据无法加载。我想我需要设置其他东西吗？

任何帮助 - 即使只是我应该阅读的关于我自己的内容，我将不胜感激。

controllers.js

Answer 1

传入的ID值将在$ stateParams中可用。如果你使用console.dir，你会看到它。我相信价值将是playlistId。鉴于数据是假的（参见上面的列表），您的代码可以执行以下操作：

$scope.playlists = [
{
    content: 'Integer legentibus erat a ante historiarum dapibus.',
    title: 'Reggae',
    id: 1 
},
{ 
    content: 'Pellentesque habitant morbi tristique senectus et netus.',
    title: 'Chill',
    id: 2 
}
];
$scope.selected = $scope.playlists[$stateParams.playlistId-1];

由于ID（1和2）与数组项匹配，因此只需使用数组索引即可获得所选值。显然，一个真正的应用程序不会像这样复制数据并使用服务，但是如果你只想让它运行起来，那么它将为你提供支持。

我使用$ scope.selected作为变量，因此在视图中，例如使用{{selected.title}}。

如何在Ionic Lab启动器项目“Sidemenu”中设置主 - 详细视图？

1 个答案: