Ionic - Javascript Action Sheet

Action Sheet is an Ionic service that will trigger a slide up pane on the bottom of the screen, which you can use for various purposes.

Using Action Sheet

In the following example, we will show you how to use the Ionic action sheet. First we will inject $ionicActionSheet service as a dependency to our controller, then we will create $scope.showActionSheet() function

Controller Code

.controller('myCtrl', function($scope, $ionicActionSheet) {
   $scope.triggerActionSheet = function() {
      // Show the action sheet
      var showActionSheet = $ionicActionSheet.show({
         buttons: [
            { text: 'Edit 1' },
            { text: 'Edit 2' }
         destructiveText: 'Delete',
         titleText: 'Action Sheet',
         cancelText: 'Cancel',
         cancel: function() {
            // add cancel code...
         buttonClicked: function(index) {
            if(index === 0) {
               // add edit 1 code
            if(index === 1) {
               // add edit 2 code
         destructiveButtonClicked: function() {
            // add delete code..


Code Explained

When we faucet the button, it'll trigger the $ionicActionSheet.show operate and also the Action Sheet can seem. you'll produce your own functions that may be known as once one among the choices is taped. The cancel operate can shut the pane, however you'll add another behavior, which can be known as once the cancel possibility is abroach before the pane is closed.

The buttonClicked operate is that the place wherever you'll write the code that may be known as once one among the edit choices is tapped . we will keep track of multiple buttons by victimization the index parameter. The destructiveButtonCLicked may be a operate that may be triggered once the delete choice is tapped . this selection is red by default.

Show Method Options

Properties Type Details
buttons object Creates button object with a text field.
titleText string The title of the action sheet.
cancelText string The text for cancel button.
destructiveText string The text for a destructive button.
cancel function Called when cancel button, backdrop or hardware back button is pressed.
buttonClicked function Called when one of the buttons is tapped. Index is used for keeping track of which button is tapped. Return true will close the action sheet.
destructiveButtonClicked function Called when destructive button is clicked. Return true will close the action sheet.
cancelOnStateChange boolean If true (default) it will cancel the action sheet when navigation state is changed.

Welookups is optimized for learning.© 2018 kumar aditya singh .
All Right Reserved and you agree to have read and accepted our term and condition.
All Rights Reserved.