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

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

 $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',

        });
    };

$scope.showActionsheet=function（）{
$IoniActionSheet.show({
titleText:“{program.label}}”，
按钮：[
{text:'Configuration'}，//仅当（ng if=“program.actions.Configuration”）时显示此选项
{text:'Administration'}，//仅当（ng if=“program.actions.Administration”）时显示此选项
{text:'编辑'}，
{文本：'Parrainage'}，
{text:'Filleuls'}，
{text:'CGV'}，
],
destructiveText:“删除”，
cancelText:“取消”，
});
};

---

如何将ng if与动作表一起使用？

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

    $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',

            });
        };
    }

$scope.showActionsheet=函数（正在编辑\u显示）
{   
变量按钮\u数组=[
{text:'配置'}，
{文本：'管理'}，
{文本：'Parrainage'}，
{text:'Filleuls'}，
{text:'CGV'}，
];
if（is_edit_show）//is_edit_show为布尔值，如果为真，则在操作按钮数组中按编辑按钮，否则为非布尔值
{
按钮_array.push（{text:'Edit'}）；
}
$IoniActionSheet.show({
titleText:“{program.label}}”，
按钮：按钮数组，
destructiveText:“删除”，
cancelText:“取消”，
});
};
}

您可以使用这样的条件制作按钮阵列

    $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',

            });
        };
    }

$scope.showActionsheet=函数（正在编辑\u显示）
{   
变量按钮\u数组=[
{text:'配置'}，
{文本：'管理'}，
{文本：'Parrainage'}，
{text:'Filleuls'}，
{text:'CGV'}，
];
if（is_edit_show）//is_edit_show为布尔值，如果为真，则在操作按钮数组中按编辑按钮，否则为非布尔值
{
按钮_array.push（{text:'Edit'}）；
}
$IoniActionSheet.show({
titleText:“{program.label}}”，
按钮：按钮数组，
destructiveText:“删除”，
cancelText:“取消”，
});
};
}

我也有同样的问题，这对我很有效

   //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
   }
});

//用于显示所有选项
变量选项=[
{text:'配置'}，
{文本：'管理'}，
{文本：'Parrainage'}，
{text:'Filleuls'}，
{text:'CGV'}，
];
如果（s_edit_show）{//添加仅显示选定文本的条件
变量选项=[
{text:'配置'}，
{文本：'管理'}，
{text:'编辑'}，
{文本：'Parrainage'}，
{text:'Filleuls'}，
{text:'CGV'}，
{text:'编辑'}，
];
}
$IoniActionSheet.show({
标题文本：“”，
按钮：选项，//更新的选项
destructiveText:“”，
cancelText:“取消”，
取消：函数（）{
console.log（'CANCELLED'）；
},
按钮勾选：功能（索引）{
如果（索引==0）{
//添加您的代码
}
});

我也有同样的问题，这对我很有效

   //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
   }
});

//用于显示所有选项
变量选项=[
{text:'配置'}，
{文本：'管理'}，
{文本：'Parrainage'}，
{text:'Filleuls'}，
{text:'CGV'}，
];
如果（s_edit_show）{//添加仅显示选定文本的条件
变量选项=[
{text:'配置'}，
{文本：'管理'}，
{text:'编辑'}，
{文本：'Parrainage'}，
{text:'Filleuls'}，
{text:'CGV'}，
{text:'编辑'}，
];
}
$IoniActionSheet.show({
标题文本：“”，
按钮：选项，//更新的选项
destructiveText:“”，
cancelText:“取消”，
取消：函数（）{
console.log（'CANCELLED'）；
},
按钮勾选：功能（索引）{
如果（索引==0）{
//添加您的代码
}
});

您可以尝试这个简单的三元运算符

<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>

setShowActionSheet（假）}
钮扣=[
{text:'关于'}，
您是否已登录？
{文本：“注销”}：
{text:'Login'}，
]
>

您可以尝试这个简单的三元运算符

<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>

setShowActionSheet（假）}
钮扣=[
{text:'关于'}，
您是否已登录？
{文本：“注销”}：
{text:'Login'}，
]
>