使用 AngularJS 和 Iconic 框架访问侧边菜单示例中的 'id' 值

Question

使用 Iconic Framework 侧面菜单示例，如何从控制器访问 'id' 和 'Title' 值？

.controller('PlaylistsCtrl', function($scope) {$scope.playlists = [
{ title: 'Traffic', id: 1 },
{ title: 'Litter', id: 2 },
{ title: 'Marine', id: 3 }]

在Playlist.html模板文件中？

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

app.js 文件中的其他相关代码是：

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

还有控制器——我认为：

.controller('PlaylistCtrl', function($scope) { 
})

Answer 1

您应该从 config 阶段提到的 state 将 PlaylistsCtrl 绑定到此 ion-view。

<ion-view view-title="Playlist One">
 <ion-content>
  <h1>Playlist</h1>
  <div ng-repeat="playlist in playlists">
  Number: {{playlist.id}} | Title: {{playlist.title}}
  </div>
 </ion-content>
</ion-view>

Answer 2

旧答案

很简单。您只需确保在您的配置中已将控制器分配给视图。

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

<ul>
  <li ng-repeat="p in playlists">
     ID: {{p.id}}
  </li>
</ul>
 </ion-content>
</ion-view>

已更新

<ion-view view-title="Playlist One">
 <ion-content>
 <h1>Playlist</h1>
  <!-- Pass playlist as a parameter named **p** here onclick function-->
<ul>
  <li ng-repeat="p in playlists" ng-click="selected(p)">
     ID: {{p.id}}
  </li>
</ul>
 </ion-content>
</ion-view>

你的控制器看起来像 this.Only 你需要像这样在你的控制器中添加 selected 函数。

.controller('PlaylistCtrl', function($scope) { 

   $scope.selected=function(playlist){
     $scope.selectedPlaylist=playlist;
     console.log($scope.selectedPlaylist.id)
   }
 })

使用 AngularJS 和 Iconic 框架访问侧边菜单示例中的 'id' 值

Accessing the 'id' value from the side menu example from the Iconic framework using AngularJS and

javascript

angularjs

iconic