Angularjs 离子-以编程方式禁用对单个离子项目的滑动

我有一个包含离子项目的离子列表<代码>可以在单个项目上滑动设置为

true

。我将其切换到

false

以尝试禁用对项目的滑动，但这并没有禁用滑动（这是我第一次测试，以查看是否可以将条件连接到

可以滑动

属性）

既然

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>

{{i.Name}
删除

尝试添加

ng-show="showButton(i)"

在您的离子选项按钮或重新排序。 在您的范围内，保持逻辑：

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

希望它能起作用！祝你好运

can swipe=“false”

仅对

离子列表

无效

但你可以试试：

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>

var functions=angular.module（'yourmodule'，[]）；
指令（'dontSwipeMe'，function（）{
返回{
链接：函数（作用域、元素、属性）{
元素打开（“dragstart”，功能（ev）{
ev.preventDefault（）；
});
}
};
});

我的应用程序需要它，并且我能够使用CSS类覆盖

项目内容

元素上的转换，该元素作为子元素动态添加到

离子项目

我的模板中包含以下内容：

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

然后在我的CSS中，我覆盖了滑动动画，如下所示：

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

---

我有一种感觉，这是一种黑客行为，但Eder的解决方案对我不起作用，而Ion还不支持这一点。

自给自足

可以为
Ion项刷
指令。它不依赖外部资源：

.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

看


使用
Ionic 1.3.1
进行测试

链接：

Github上的指令。
我认为用
ng if
指令将
ion选项按钮
包装在
div
中就可以了

.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