jquery - AngularJS - ui-sortable - 如何禁用对可排序列表中的一项进行排序？

Question

这是一个Plunker example 。 [根据以下答案更新了 plunk]

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

更新
您可以阻止该项目被排序，如 this :

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