Ionic - Vô hiệu hóa vuốt trên từng vật ion riêng lẻ theo chương trình

Question

Tôi có một danh sách ion chứa các vật ion. can-swipe được đặt thành true trên các mục riêng lẻ. Tôi đã chuyển nó thành false để cố gắng vô hiệu hóa vuốt trên các mục nhưng điều này không vô hiệu hóa việc vuốt (đây là thử nghiệm đầu tiên của tôi để xem liệu tôi có thể kết nối điều kiện với thuộc tính can-swipe) hay không.

Làm cách nào để vô hiệu hóa một số mục nhất định, vì can-swipe="false" không thực hiện thủ thuật?

<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

Cố gắng thêm một

ng-show="showButton(i)" 

On ion-option-nút hoặc sắp xếp lại của bạn. Trên phạm vi của bạn, hãy giữ nguyên logic:

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

Hy vọng nó hoạt động! Chúc may mắn!

Answer 2

can-swipe="false" sẽ không hoạt động trên ion-item chỉ ion-list.

Nhưng bạn có thể thử:

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 3

tôi cần điều này cho ứng dụng của tôi, và tôi đã có thể sử dụng các lớp CSS để ghi đè lên các biến đổi trên item-content yếu tố đó là tự động thêm vào như một đứa trẻ để ion-item.

Tôi có sau trong template của tôi:

<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> 

Sau đó, trong bộ điều khiển của tôi, tôi có điều này:

$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; 
    } 
}; 

Sau đó, trong CSS của tôi, tôi ghi đè lên các hình ảnh động swipe như vậy:

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

Tôi có cảm giác đây là loại hacky, nhưng giải pháp của Eder không hoạt động đối với tôi và Ion không hỗ trợ thi s chưa.

Answer 4

Tự đủ can-swipe chỉ thị cho ion-item. Nó không có bất kỳ sự phụ thuộc nào vào tài nguyên bên ngoài:

.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 

Xem live can-swipe example on Codepen.

Thử nghiệm với Ionic 1.3.1.

Links:

can-swipe chỉ thị trên Github.

Answer 5

Tôi nghĩ rằng gói ion-option-button trong một div với chỉ thị ng-if sẽ thực hiện thủ thuật