AngularJS - ui-sortable - How to disable sorting on just one item from the sortable list?

Question

Here is a Plunker example. [updated the plunk based on below answers]

Updated Plunk

How can I disable sorting on just one or two items. For example, item 1 and item 3, so the user can't move those two items ?

I tried

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

in sortableOptions, but that disables sorting on the whole list.

I'm looking for something like

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

Thanks.

Answer 1

You can configure a class for items that should not be dragged:

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

Then conditionally add that class in 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}}

Update
You can prevent the item from being sorted like this:

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

Answer 2

Have you tried to implement the update option?

From the ui-sortable documentation, a modified and over simplified version for your use case:

First, add a enabled property to your array:

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

and then assert it's status in the 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