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

ohtdti5x  于 2022-10-31  发布在  Angular
关注(0)|答案(4)|浏览(178)

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

$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和操作表???

ctehm74n

ctehm74n1#

您可以使用如下条件创建按钮数组。

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

            });
        };
    }
f4t66c6m

f4t66c6m2#

我也有同样问题,这对我很有效

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

nzk0hqpo3#

您可以尝试使用这个简单的三元运算子。

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

euoag5mw4#

对于那些寻找如何使用Ionic 4 - 6版本有条件地隐藏操作表按钮之一的人。你可以为每个按钮使用类名。
创建CSS类并将其插入globle.css

.btn_hide{
  display: none !important;
}
.btn_show{
  display: block !important;
}

TS代码:

async presentActionSheet(className : any) {
    const actionSheet = await this.actionSheetController.create({
      header: 'Albums',
      cssClass: 'my-custom-class',
      buttons: [{
        text: 'Delete',
        role: 'destructive',
        icon: 'trash',
        class : className  < -- Here you can assign class name using ngif in HTML 
        data: {
          type: 'delete'
        },
        handler: () => {
          console.log('Delete clicked');
        }
      }, {
        text: 'Share',
        icon: 'share',
        data: 10,
        handler: () => {
          console.log('Share clicked');
        }
      }
      }]
    });
    await actionSheet.present();

  }

HTML:

<ng-container *ngIf="expression; else img">
      <img class="" src="url" width="60" *ngIf="expression" alt="" (click)="presentActionSheet('btn_show')">
     </ng-container>

     <ng-template #img>
      <img class="" src="url" width="60"  (click)="presentActionSheet('btn_hide')">
     </ng-template>

它工作正常,没有任何问题。

相关问题