Ionic: How to show different menu for different view?

Question

I am working on a project using Ionic framework. I want to get right menu on specific page (each right menu will have different content). I am not sure how to implement that.

its hard to understand this..!put some code..!and describe more..to get help..! — the_mahasagar, Feb 23 '16 at 05:26

score 1 · Answer 1 · answered Feb 23 '16 at 05:32

I am assuming that You want to have the sidemenu different while changing the view please see below sample:

HTML

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Ionic Template</title>

    <link href="http://code.ionicframework.com/1.0.0-beta.4/css/ionic.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.0.0-beta.4/js/ionic.bundle.js"></script>
  </head>
  <body >

    <ion-nav-view></ion-nav-view>

    <script id="app.html" type="text/ng-template">
<ion-side-menus>

  <ion-pane ion-side-menu-content>
    <ion-nav-bar class="bar-stable nav-title-slide-ios7">
      <ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="appContent" animation="slide-left-right"></ion-nav-view>
  </ion-pane>

  <ion-side-menu side="left">
      <ion-nav-view name="menuList"></ion-nav-view>
  </ion-side-menu>
</ion-side-menus>

    </script>    

    <script id="browse.html" type="text/ng-template">
<ion-view title="Browse">
  <ion-nav-buttons side="left">
    <button menu-toggle="left"class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-content class="has-header">
    <h1>Browse</h1>
  </ion-content>
</ion-view>

    </script>    

    <script id="menuBrowse.html" type="text/ng-template">
<header class="bar bar-header bar-stable">
    <h1 class="title">First Menu</h1>
</header>
<ion-content class="has-header">
    <ion-list>
        <ion-item nav-clear menu-close href="#/app/search">
            Search
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/playlists">
            Second Menu
        </ion-item>
    </ion-list>
</ion-content>

    </script>    


    <script id="menuPlaylists.html" type="text/ng-template">
      <header class="bar bar-header bar-stable">
    <h1 class="title">Second Menu</h1>
</header>
<ion-content class="has-header">
    <ion-list>
        <ion-item nav-clear menu-close href="#/app/search">
            Search
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/browse">
            Different Menu
        </ion-item>
    </ion-list>
</ion-content>

    </script>    


    <script id="menuSearch.html" type="text/ng-template">
<header class="bar bar-header bar-stable">
    <h1 class="title">Search Menu</h1>
</header>
<ion-content class="has-header">
    <ion-list>
        <ion-item nav-clear menu-close href="#/app/browse">
            Browse
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/playlists">
            Playlists
        </ion-item>
    </ion-list>
</ion-content>

    </script>    

    <script id="playlist.html" type="text/ng-template">
<ion-view title="Playlist">
  <ion-content class="has-header">
    <h1>Playlist</h1>
  </ion-content>
</ion-view>

    </script>    

    <script id="playlists.html" type="text/ng-template">
<ion-view title="Playlists">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-content class="has-header">
    <ion-list>
      <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
        {{playlist.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

    </script>    

    <script id="search.html" type="text/ng-template">
<ion-view title="Search">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-content class="has-header">
    <h1>Search</h1>
  </ion-content>
</ion-view>

    </script>    

    <script id="" type="text/ng-template">

    </script>    

    <script id="" type="text/ng-template">

    </script>    



  </body>
</html>

JS

angular.module('ionicApp', ['ionic'])


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

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

            .state('app.search', {
                url: "/search",
                views: {
                    'appContent' :{
                        templateUrl: "search.html"
                    },
                    'menuList': {
                        templateUrl : "menuSearch.html"
                    }
                }
            })

            .state('app.browse', {
                url: "/browse",
                views: {
                    'appContent' :{
                        templateUrl: "browse.html"
                    },
                    'menuList': {
                        templateUrl : "menuBrowse.html"
                    }
                }
            })

            .state('app.playlists', {
                url: "/playlists",
                views: {
                    'appContent' :{
                        templateUrl: "playlists.html",
                        controller: 'PlaylistsCtrl'
                    },
                    'menuList': {
                        templateUrl : "menuPlaylists.html",
                        controller: "PlaylistsCtrl"
                    }

                }
            })

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

        // if none of the above states are matched, use this as the fallback
        $urlRouterProvider.otherwise('/app/playlists');
    })

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

    .controller('PlaylistsCtrl', function($scope, $state) {
        $scope.playlists = [
         { title: 'WebRuster', id: 1 },
        { title: 'WebRuster', id: 2 },
        { title: 'WebRuster', id: 3 },
        { title: 'WebRuster', id: 4 },
        { title: 'WebRuster', id: 5 },
        { title: 'WebRuster', id: 6 }
        ];

        $scope.goTabs = function() {
            console.log('Going to tabs!');
            $state.go("app.tabs.home");
        }
    })

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

Here is working CodePen

Thanks for answer. This solution is looking very good. Unfortunately it did not work in my case. I already have left menu but I want to show additional right menu — user2899728, Feb 23 '16 at 06:11
@user2899728 you mean you want to add the menus to the existing side menu? if so please provide some code of yours so that , i will try to customize it — Krsna Kishore, Feb 23 '16 at 06:16
No @webruster I just want to have different right side menus for different views. Left menu is already working fine and it will not change. I am just talking about right side menu. — user2899728, Feb 23 '16 at 08:25
Yes right, but right one will be different for different views. For example If I am viewing an image then right menu will show options to edit and delete photo. Similarly all other views will have different right side menu depending upon the nature of the content. — user2899728, Feb 23 '16 at 08:53
@user2899728 which means my previous solution will work out but i need to incorporate a static left menu and right menu should be above mentioned solution, is this you want? — Krsna Kishore, Feb 23 '16 at 08:57
@user2899728 please provide your code so that it would make my work easy and i can embed into your code — Krsna Kishore, Feb 23 '16 at 09:10
You can check files from https://www.dropbox.com/s/5yu8deldsletcgk/rANTER.zip?dl=0 — user2899728, Feb 23 '16 at 09:34

Ionic: How to show different menu for different view?

1 Answers1

Linked