Question

如何有条件地隐藏其中一个动作表按钮？

 $scope.showActionsheet = function() {

        $ionicActionSheet.show({
            titleText: "<i>{{program.label}}</i>" ,
            buttons: [
                { text: '<i class="icon ion-gear-a"></i> Configuration' }, // show this only if (ng-if="program.actions.configuration")
                { text: '<i class="icon ion-cube"></i> Administration' }, // show this only if (ng-if="program.actions.administration")
                { text: '<i class="icon ion-edit"></i> Edit' },
                { text: '<i class="icon ion-person-add"></i> Parrainage' },
                { text: '<i class="icon ion-person-stalker"></i> Filleuls' },
                { text: '<i class="icon ion-clipboard"></i> CGV' },
            ],
            destructiveText: 'Delete',
            cancelText: 'Cancel',

        });
    };

如何使用ng-if和行动表???

Answer 1

你可以使用这样的条件制作按钮数组。

    $scope.showActionsheet = function(is_edit_show) 
    {   
        var button_array = [
                    { text: '<i class="icon ion-gear-a"></i> Configuration' },
                    { text: '<i class="icon ion-cube"></i> Administration' },
                    { text: '<i class="icon ion-person-add"></i> Parrainage' },
                    { text: '<i class="icon ion-person-stalker"></i> Filleuls' },
                    { text: '<i class="icon ion-clipboard"></i> CGV' },
                ];

        if(is_edit_show) //is_edit_show is boolean if it is TRUE edit button pushed in action button array otherwise not 
        {
            button_array.push({ text: '<i class="icon ion-edit"></i> Edit' });
        }

            $ionicActionSheet.show({
                titleText: "<i>{{program.label}}</i>" ,
                buttons: button_array,
                destructiveText: 'Delete',
                cancelText: 'Cancel',

            });
        };
    }

Answer 2

我有同样的问题，这对我有用

   //For showing all options
     var opts = [
            { text: '<i class="icon ion-gear-a"></i> Configuration' }, 
            { text: '<i class="icon ion-cube"></i> Administration' },                
            { text: '<i class="icon ion-person-add"></i> Parrainage' },
            { text: '<i class="icon ion-person-stalker"></i> Filleuls' },
            { text: '<i class="icon ion-clipboard"></i> CGV' },

  ];



 if(s_edit_show){//add condition for showing only selected text 
  var opts = [
            { text: '<i class="icon ion-gear-a"></i> Configuration' }, 
            { text: '<i class="icon ion-cube"></i> Administration' }, 
            { text: '<i class="icon ion-edit"></i> Edit' },
            { text: '<i class="icon ion-person-add"></i> Parrainage' },
            { text: '<i class="icon ion-person-stalker"></i> Filleuls' },
            { text: '<i class="icon ion-clipboard"></i> CGV' },
            { text: '<i class="icon ion-edit"></i> Edit' },

    ];

   }
$ionicActionSheet.show({
  titleText: '',
  buttons: opts, //updated options
  destructiveText: '',
  cancelText: 'Cancel',
  cancel: function() {
    console.log('CANCELLED');
  },
buttonClicked: function(index) {
   if(index === 0) {
      //add your code
   }
});

Answer 3

你可以试试这个简单的三元运算符。

<IonActionSheet
    isOpen={showActionSheet}
    onDidDismiss={() => setShowActionSheet(false)}
    buttons=[
        {text: '<i class="icon ion-about"></i> About'},
    is_logged_in?
    {text: '<i class="icon ion-logout"></i> Logout'}:
    {text: '<i class="icon ion-login"></i> Login'},
      ]
        ></IonActionSheet>

如何有条件地隐藏其中一个操作表按钮？

3 个答案: