How to dynamically disable ui-sortable directive in angular-ui

Question

I am using angular-ui for sortable using ui-sortable directive. Is it possible to dynamically enable/disable sortable functionality based on the scope state? So I need to have a button which changes the state of the scope property and depending on this property sortable either should work or not.

Answer 1

The angular directive supports watching when the sortable options change:

scope.$watch(attrs.uiSortable, function(newVal, oldVal){

So all you had to do was look at the jqueryui sortable documentation, and update the correct property on the plugin.

Html

<ul ui-sortable="sortableOptions" ng-model="items">
   <li ng-repeat="item in items">{{ item }}</li>
 </ul>
<button ng-click="sortableOptions.disabled = !sortableOptions.disabled">Is Disabled: {{sortableOptions.disabled}}</button>

JS

app.controller('MainCtrl', function($scope) {
  $scope.items = ["One", "Two", "Three"];

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

Answer 2

My first attempt at this would include a new directive with a link function that compiles a template fragment either including or not including ui-sortable based upon some value in the scope.

Code when I have time.

Answer 3

You could use ui-if to toggle between a ui-sortable version and a non-sortable version, however this is a horrible design. However if you checked out the jQuery Sortable Docs it seems that there's an option for disabled . If the directive currently watches the options object for changes, you could simply toggle this option. If the options object is watched by reference and not by value, then perhaps you should open a pull-request with the tweak?

Answer 4

HTML

<div class="group-container" ui-sortable="vm.groupSortable" ng-model="group.groups">

JS

vm.groupSortable = {
    connectWith: ".group-container",
    disabled: true
};

vm.disableDragAndDrop = function(bVar)
{
    vm.groupSortable.disabled = bVar;
};