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!

Answer 3

I think Wrapping the ion-option-button in a div with a ng-if directive will do the trick

Answer 4

can-swipe="false" will not work on ion-item only ion-list.

But you can try:

var functions = angular.module('yourmodule', []);
functions.directive('dontSwipeMe', function() {
    return {
        link: function(scope, element, attr) { 
            element.on("dragstart", function(ev) {
                ev.preventDefault();      
            });
        }
    };
});
<ion-item dontSwipeMe> </ion-item>

Answer 5

Self sufficient can-swipe directive for ion-item. It does not have any dependency on external resources:

.directive('canSwipe', function() {
  return {
    restrict: 'A',
    require:  '^ionItem',
    link: function(scope, element, attr, itemCtrl) {

      if(attr.canSwipe !== null && attr.canSwipe.length > 0 && 
         typeof(!!attr.canSwipe) === "boolean") {
        scope.$watch('!!(' + attr.canSwipe + ')', function(value) {
          canSwipe(value);
        });
      }

      canSwipe(attr.canSwipe === 'true');

      function canSwipe(can) {
        if (!itemCtrl.optionsContainer) {
          return;
        }
        // Class item-options is the flag for ionic.views.ListView whether 
        // item can be swiped (dragged):
        //    if (item && item.querySelector('.item-options')) { do drag ...}
        itemCtrl.optionsContainer.toggleClass('item-options', can);
        // Hide options button container.
        itemCtrl.optionsContainer.toggleClass('ng-hide', !can);
      } // canSwipe

    } // link
  }; // return
}) // canSwipe directive

See live can-swipe example on Codepen.

Tested with Ionic 1.3.1.

Links:

can-swipe directive on Github.