Ionic Pull-Up Menu

From WikiOD

Ionic pull-up menu (Action Sheet)[edit | edit source]

The pull-up menu (Action Sheet) allows the user to select options through a pop-up box.

Very dangerous options will be highlighted in red for the first time recognition. You can make it disappear by clicking the cancel button or clicking on a blank space.

Instance[edit | edit source]

HTML code[edit | edit source]
 <body ng-app="starter" ng-controller="actionsheetCtl">
             <code><h2 ng-click="show()">Action Sheet</h2></code>
JavaScript code[edit | edit source]

To trigger the pull-up menu in the code, you need to use the $ionicActionSheet service in your angular controller:

 angular.module('starter', ['ionic'])
 .run(function($ionicPlatform) {
   $ionicPlatform.ready(function() {
     // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
     // for form inputs)
     if(window.cordova && window.cordova.plugins.Keyboard) {
     if(window.StatusBar) {
 .controller('actionsheetCtl',['$scope','$ionicActionSheet','$timeout' ,function($scope,$ionicActionSheet,$timeout){
     $ = function() {
         var hideSheet = ${
             buttons: [
               {text:'<code><b>Share</b></code> This' },
             titleText:'Modify your album',
             cancel: function() {
                  // add cancel code..
             buttonClicked: function(index) {
               return true;
         $timeout(function() {
         }, 2000);