Search code examples
javascriptangularjsiconic

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


With the Iconic Framework side menu example how do I access the 'id' and 'Title' value from the controller?

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

In the Playlist.html template file?

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

The other relevant code from app.js file is:

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

And the controller - I think:

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

Solution

  • Old Ans

    Its Simple. you just have to insure that in your Config you have assigned controller to the view.

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

    Updated

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

    Your controller will look like this.Only you need to add selected function in your controller like this.

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