Is there a way to have ion-option-button hide or show itself within a list item?

ionic-v1
1

Hi,

We’re trying to write code that hides some of the option buttons within an ion-item.

Our app generates personal traffic notifications for users in London. We want the ability to hide or show individual ion-option-button within an ion-item depending on the state of a variable. In this use-case, if the user has ‘locked’ an ion-item, they can’t delete the ion-item.

Its easier to show as pictures. In the picture below the user has locked the item, indicated by the red padlock.

image

if the user swipes they get four options, Unlock, Show, Rename and Delete.

image

We want the user to NOT have the Delete or the Rename option shown. This is a mockup of how it would looke

image

Our code is pretty simple and follows the Ionic documentation.

    <ion-option-button class="button-stable" ng-click="ToggleRouteLock(route.id)">{{ GetLockStatusText(route.id) }}</ion-option-button>
    <ion-option-button class="button-balanced" ng-click="UseThisRouteName(route.id)">Show</ion-option-button>
    <ion-option-button class="button-positive" ng-click="EditRouteName(route.id)">Rename</ion-option-button>
    <ion-option-button class="button-assertive" ng-click="DeleteRoute(route.id)">Delete</ion-option-button>

We tried to put a div with a ng-show or ng-if and that didn’t work for us. We could hide all the buttons at run time or none but not individual buttons within an ion-item.

Our assumption is that the list of ion-option-button’s are created at run time and can’t be changed dynamically.

We know we can change the ng-click over so that clicking the ion-option-button would not do anything, but that seems the wrong way to do it, we want to remove the delete option if the user has locked an item. We also know you can hide ALL the delete buttons for the list but we need to be selective,

Any suggestions welcomed,

Thanks,

Rob

2

No sooner have we written this that we had worked out how to do it ourselves :smile:

You simply put a ng-show and/or ng-hide in the ion-option-button itself. Using the above code example, but now updated.

    <ion-option-button class="button-stable" ng-click="ToggleRouteLock(route.id)">{{ GetLockStatusText(route.id) }}</ion-option-button>
    <ion-option-button class="button-balanced" ng-click="UseThisRouteName(route.id)">Show</ion-option-button>
    <ion-option-button class="button-positive" ng-click="EditRouteName(route.id)" ng-hide="IsRouteLocked(route.id)">Rename</ion-option-button>
    <ion-option-button class="button-assertive" ng-click="DeleteRoute(route.id)" ng-hide="IsRouteLocked(route.id)">Delete</ion-option-button>

There’s always another way to do things

I’ll leave this here for somebody else to use.

Rob