Ionic - Disable swiping on individual ion-items programmatically

Question

I have an ion-list that contains ion-items. can-swipe is set to true on the individual items. I toggled it to false to try to disable swiping on the items, but this did not disable swiping (this was my first test to see if I could hook up a condition to the can-swipe attribute).

How would I disable certain items, since can-swipe="false" is not doing the trick?

<ion-list show-reorder="data.showReorder">
    <ion-item ng-repeat="i in items track by $index" class="item item-remove-animate"
        can-swipe="true" ng-click="manageOption($index);">
        <b>{{i.Name}}</b>
    <ion-option-button class="button-assertive" ng-click="deleteOption($index);">
        Delete
    </ion-option-button>
    <ion-reorder-button class="ion-navicon" on-reorder="moveOption(o, $fromIndex, $toIndex)"></ion-reorder-button>
    </ion-item>
</ion-list>

Answer 1

I needed this for my app, and I was able to use CSS classes to override the transformation on the item-content element that is dynamically added as a child to ion-item.

I have the following in my template:

<ion-item collection-repeat="report in dashboardReports" ng-class="isSwipeable(report.id)">
  <p>Some content</p>
  <ion-option-button ng-click="itemButton(report.id)">
</ion-item>

Then in my controller I have this:

$scope.lockedItems = []

$scope.itemButton = function(id) {
  $scope.lockedItems.append(id)
}

$scope.isSwipeable = function (id) {
  if ($scope.lockedItems.indexOf(id) !== -1) {
    return 'swipe-disabled';
  } else {
    return true;
  }
};

Then in my CSS, I override the swipe animation like so:

.swipe-disabled div.item-content {
    -webket-transition: none !important;
    -webket-transform: none !important;
    transform: none !important;
}

I have a feeling this is kind of hacky, but Eder's solution did not work for me and Ion does not support this yet.

Answer 2

Try to add a

ng-show="showButton(i)"

On your ion-option-button or reorder. On your scope, keep the logic:

$scope.showButton(item)
{
  return item.show; //Or whatever logic you want to have. 
}

Hope it works! Good luck!