How to link dynamic list to different files?

ionic-v1
1

Hi

I am using side menu template and created dynamic list but now I am stuck !

Please anybody help me. I have created dynamic list

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

    .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
  })

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

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

and Controller is

.controller('PlaylistsCtrl', function($scope) {
  $scope.suralists = [
    {
      id: '1',
      title: 'Ya-Sin',
      desc: '(No: 36, Verses: 83, Makki)',
    },
    {
      id: '2',
      title: 'Ar-Rahman',
      desc: '(No: 55, Verses: 78, Madani)',
    },    
    {
      id: '3',
      title: 'Al-Waqi',
      desc: '(No: 56, Verses: 96, Makki)',
    },   
    {
      id: '4',
      title: 'Ar-Rum',
      desc: '(No: 30, Verses: 60, Makki)',
    },   
    {
      id: '7',
      title: 'Al-Hashr',
      desc: '(No: 59, Verses: 24, Madani)',
    },   
    {
      id: '18',
      title: 'Al-Falaq',
      desc: '(No: 113, Verses: 5, Makki)',
    },  

    
  ];
})

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

 

});

and suralists.html is

<ion-view view-title="Quran Sura List">
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="suralist in suralists" class="item-left item-icon-left" href="#/app/suralists/{{suralist.id}}">
        <i class="icon ion-ios-book"></i>
        {{suralist.title}}<div class="item-note">{{suralist.desc}}</div>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

and suralist.html is

<ion-view view-title="Ya-Sin" id="2">
  <ion-content>
    <h1>Ya-Sin</h1>
  </ion-content>
</ion-view>

I want every dynamic list when clicked, new file or new view will open, how can I do this?

2

Take a look at my blog article: http://www.gajotres.net/ionic-framework-tutorial-5-master-detail-pattern/

It covers excatly what you need.

3

Thanks for reply @Gajotres

Not exactly what I need. I am trying to define

list item 1 should open separate static content
list item 2 should open separate static content
…

Now I think you can understand what I want.

4

What do you mean by: “separate static content”?

Do you have predefined pages and each list element should lead to them?

5

I have already published my code in my first post.

stating content mean

a.html

<ion-view view-title="ContentA">
  <ion-content>
    <h1>ContentA</h1>
  </ion-content>
</ion-view>

b.html


ContentB



I mean if I click on first list item it should open a.html and when I click on second list item it should open b.html and so on

6

Before we continue any further … isn’t this counterproductive to have a separate prebuilt page for a dynamic content?
This doesn’t make any sense.

You can still reuse most of my code though you will not use a:

href="#/movie/{{movie.id}}"

Instead you will need to change your page programmatically using:

$state.go('view', {movieid: 1});
7

I am new can you please explain in detail?

We can change this that every time when list 1 clicked than it should show different content and so on