AngularJS - ui-sortable - 如何禁用可排序列表中的一个项目的排序？

Question

这是一个Plunker示例.[根据以下答案更新了plunk]

更新了Plunk

如何禁用一两个项目的排序.例如,第1项和第3项,那么用户无法移动这两项？

我试过了

   $scope.sortableOptions = {
       disabled:true,
   };

在sortableOptions中,但禁用整个列表上的排序.

我正在寻找类似的东西

  <div ui-sortable="sortableOptions" ng-model="list">    
  <div ng-repeat="item in list">    
    <div ng-switch on="item.text">    

      <div ng-switch-when="Item 1" >    
        <div ui-sortable="sortableOptions.disabled=true">{{item.text}} - Sorting disabled</div>    
      </div>  

     <div ng-switch-default>    
        <div>{{item.text}} - Sorting enabled</div>    
      </div>  

    </div>    
  </div>    
</div>

谢谢.

Answer 1

您可以为不应拖动的项目配置类:

$scope.sortableOptions = {
cancel: ".unsortable",

然后有条件地将该类添加到ngRepeat:

<ul ui-sortable="sortableOptions" ng-model="list" class="list">
  <li ng-repeat="item in list" class="item"  
      ng-class="{'unsortable': item.text == 'Item 2'}">
    {{item.text}}

更新
您可以防止物品被分拣像这样:

$scope.sortableOptions = {
cancel: ".unsortable",
items: "li:not(.unsortable)",

Answer 2

您是否尝试过实施更新选项？

根据 ui-sortable 文档，针对您的用例进行了修改和过度简化的版本：

首先，向数组添加一个启用的属性：

    for (var i = 1; i <= 6; i++){
        tmpList.push({
          text: 'Item ' + i,
          value: i,
          enabled: true
        });
      }

然后在 sortableOptions 中断言它的状态：

    $scope.sortableOptions = {
      update: function(e, ui) {
        if (ui.item.scope().item.enabled === false) {
          ui.item.sortable.cancel();
   }}};

https://github.com/angular-ui/ui-sortable