How can you hide one of the actionsheet buttons conditionally?

ionic-v1
1

How can you hide one of the actionsheet buttons conditionally?

$scope.showActionSheet = function() {
$ionicActionSheet.show({
  buttons: [
    { text: 'Share' },
    { text: 'Report'},
  ],
  destructiveText: 'Delete',   //show this only if scope.showdelete = true
  titleText: 'Actions',
  cancelText: 'Cancel',
  cancel: function() {
        // add cancel code..
  },
1 Like
2

Maybe try:

$scope.showActionSheet = function() { $ionicActionSheet.show({ buttons: [ { text: 'Share' }, { text: 'Report'}, ], destructiveText: '<a ng-if="showdelete">Delete</a>', //show this only if scope.showdelete = true titleText: 'Actions', cancelText: 'Cancel', cancel: function() { // add cancel code.. }

3

Hmm, unfortunately, that doesn’t seem to do it…

4

The correct answer is here:

2 Likes
5

Another way to do it is to add a class to the buttons object. It’s not covered in the official docs, but you can see it if you check the HTML code of the action sheet.

buttons: [{
        text: 'New',
        className: 'static-class'
      }, {
        text: 'Edit',
        className: $scope.dynamicClass
      }, {
        text: 'Delete'
      }
}]
6

I solved this by creating a method to get Array elements from button array

BTN_ARRAY(dataindex: Array<number>, BTN_ARRAY: any) {
    let BTN_OPTION_DRAFT_MORE = [];
    BTN_ARRAY.forEach((ele: any, index: number) => {
      dataindex.forEach(el => {
        if (index === el) {
          BTN_OPTION_DRAFT_MORE.push(ele);
        }
      })
    });
    return BTN_OPTION_DRAFT_MORE;
  }

After that let’s create button actionsheet array like below code:

BTN_OPTION_MORE = [{
    text: 'ButtonA',
    //icon: 'settings',
    handler: () => {
     //console.log('ButtonA clicked');
        }
      });
    }
  }, {
    text: 'ButtonB',
    //icon: 'settings',
    handler: () => {
     //console.log('ButtonB clicked');
    }
  }, {
    text: 'ButtonC',
    //icon: 'settings',
    handler: () => {
     //console.log('ButtonC clicked');
    }
  }, {
    text: 'ButtonD',
    role: 'destructive',
    handler: () => {
     //console.log('ButtonD clicked');
        }
      });
    }
  }, {
    text: 'Cancel',
    role: 'cancel',
    handler: () => {
      //console.log('Cancel clicked');
    }
  }];

Now you can show button array what you want by index of button array. let MoreOptions() is the actionsheet function.

async MoreOptions() {
    const actionSheet = await this.actCtr.create({
      header: 'Options',
      buttons: this.BTN_OPTION_MORE_ACTIVE
    });
    await actionSheet.present();
  }

//////Do condition below 

if (true) {
   this.BTN_OPTION_MORE_ACTIVE = this.BTN_ARRAY([2, 4, 9, 10], this.BTN_OPTION_MORE);
} 
else {
   this.BTN_OPTION_MORE_ACTIVE = this.shareService.BTN_ARRAY([0,1, 2, 3, 4, 5], this.BTN_OPTION_MORE);
}

Hope can help Thanks.