Ionic - disable scrolling on individual ionic elements programmatically

Question

I have an ion list containing ionic items. can-swipe set to true for individual items. I switched it to false to try to disable the scrolling of elements, but this did not disable scrolling (this was my first test to check if I can connect the condition to the can-swipe attribute).

How to disable some elements since can-swipe="false" doesn't do 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 need this for my application, and I was able to use CSS classes to override the transformation in the item-content element, which is dynamically added as a child of the ion-item .

My template has the following:

 <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 the following:

 $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 redefine the swipe animation like this:

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

I have the feeling that this is hacky, but the Eder solution does not work for me, and Ion does not support this yet.

Answer 2

Try to add

 ng-show="showButton(i)" 

On your ionic button or reordering. Keep your logic in your reach:

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

Hope it works! Good luck

Answer 3

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

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 4

Self-contained can-swipe directive for ion-item . It has no dependence 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 the live can-swipe example on Codepen .

Tested with Ionic 1.3.1 .

References:

can-swipe Github directive.

Answer 5

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