Hide Ionic ion-options-button

Question

I have an ionic list with ion options button

<ion-list show-delete="data.showDelete" show-reorder="data.showReorder">
            <ion-item ng-repeat="milestone in milestones" item="item milestone" class="item-remove-animate">
                <div class="ft-14 db-txt txt-reg ws-nor">{{milestone.text}}</div>
                <ion-option-button class="button-positive lg-m-align" ng-click="achieve(milestone)">
                    <i class="lg-icon-tick-thick ft-20"></i>
                </ion-option-button>
                <ion-option-button class="button-dark lg-m-align" ng-click="delete(milestone)">
                    <i class="lg-icon-delete ft-24"></i>
                </ion-option-button>
                <ion-option-button class="button-balanced lg-m-align" ng-click="edit(milestone)">
                    <i class="lg-icon-edit ft-24 db-txt"></i>
                </ion-option-button>
                <!--ion-reorder-button class="ion-navicon" on-reorder="moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button-->
            </ion-item>
            <ion-item class="item">
                   <input type="text" ng-model="newMilestone.text" placeholder="Add New"  />
            </ion-item>
        </ion-list>

Let's say I swipe left on an item. Then the buttons appear. I click on a button and it does what it's supposed to do.But next time what i want is that it can hide some options buttons.

Thanks for help

Jur Clerkx Jur Clerkx · Accepted Answer · 2016-03-16T10:26:59

In your controller, you can use the $scope to set variables you can use in your html template. Let's say we make a variable test and set it to true:

$scope.test = true;

After this you can use the variable in the html. So let's say you want to hide an option button when test is true:

<ion-option-button ng-hide="test">Testoption</ion-option-button>

In the same way, you can use ng-show, then an html entity will only show up when the variable is true.

Hide Ionic ion-options-button

1 Answers