Having functions for each Action Sheet button


#1

Taking the standard markup for setting up an Action Sheet, I’m trying to create a function for each of the non-desctuctive buttons. So if my mark up is this:

$scope.show = function() {

    // Show the action sheet
    $ionicActionSheet.show({

      // The various non-destructive button choices
      buttons: [
        { text: 'Manual' },
        { text: 'See on Site' },
      ],



      // The text of the cancel button
      cancelText: 'Close',

      // Called when the sheet is cancelled, either from triggering the
      // cancel button, or tapping the backdrop, or using escape on the keyboard
      cancel: function() {
      },

      // Called when one of the non-destructive buttons is clicked, with
      // the index of the button that was clicked. Return
      // "true" to tell the action sheet to close. Return false to not close.
      buttonClicked: function(index) {
       return true;
      },

      // Called when the destructive button is clicked. Return true to close the
      // action sheet. False to keep it open
      destructiveButtonClicked: function() {
        return true;
      }
    });

  };

How do I expose the two buttons I have set up in my buttons array. Will this be similar to how left buttons and right buttons are set up for each controller?


Invoke modal from action sheet
#2
buttonClicked: function(index) {
       if(index === 0){ // Manual Button
         alert('Manual button clicked...');
       }
       else if(index === 1){
        alert('See on Site button clicked...');
       }

       return true;
  }

#3

Awesome, thanks a lot


#4

I know this is an old thread, but I stumbled upon this looking for the same thing.
Just wanted to share my approach in solving this.

var buttons = [
    { text: "My button", action: function() { alert("You pushed My button!"); } },
    { text: "Mah bahtton!", action: function() { alert("Mah bahtton?"); } }
]

$ionicActionSheet.show({
    buttons: buttons,
    buttonClicked: function(index) {
        if(buttons[index].action) {
            buttons[index].action()
        }

        return true
    }
});

This way the amount of if statements goes down and I think it makes the code a bit cleaner. :slight_smile:


#5

f it works, I have it this way…

 $scope.showActionsheet = function() {
 var buttons = [{id:1,text:"one"},{id:2,text:"two"},
                   {id:3,text:"three"},{id:4,text:"four"}];
     
    $ionicActionSheet.show({
        buttons: buttons,
             buttonClicked: function(index) {
            if(buttons[index].action) {
                buttons[index].action()
            }

            return true
        },
		 cancelText: 'Cancel',
		 cancel: function() {
		
		 }
    });

  };