离子 - 禁用以编程方式在单个离子项上滑动

Question

我有一个包含离子项的离子列表.can-swipe设置为true单个项目.我切换它以false试图禁用对项目的刷卡,但这并没有禁用刷卡(这是我的第一个测试,看看我是否可以将条件挂钩到can-swipe属性).

我如何禁用某些项目,因为can-swipe="false"没有做到这一点？

<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

我需要这个用于我的应用程序,并且我能够使用CSS类来覆盖item-content作为子动态添加的元素的转换ion-item.

我的模板中有以下内容:

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

然后在我的控制器中我有这个:

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

然后在我的CSS中,我重写滑动动画,如下所示:

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

我觉得这有点像hacky,但Eder的解决方案对我不起作用而且Ion还不支持.

Answer 2

尝试添加一个

ng-show="showButton(i)"

在您的离子选项按钮上或重新订购。在你的范围内，保留逻辑：

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

希望它有效！祝你好运！