angularjs - 如何在angular-ui中动态禁用ui-sortable指令

Question

我正在使用 angular-ui 进行排序，使用 ui-sortable 指令。是否可以根据范围状态动态启用/禁用可排序功能？所以我需要一个按钮来改变范围属性的状态，并根据这个属性排序是否应该工作。

Answer 1

angular 指令支持观察可排序选项何时发生变化：

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

因此，您所要做的就是查看 jqueryui 可排序文档，并更新插件上的正确属性。

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

您可以使用在版本和不可排序版本ui-if之间切换ui-sortable，但这是一个可怕的设计。但是，如果您查看了jQuery Sortable Docs，似乎有一个disabled. 如果指令当前监视选项对象的更改，您可以简单地切换此选项。如果选项对象是通过引用而不是值来监视的，那么也许您应该使用调整打开一个拉取请求？

Answer 3

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

Answer 4

我对此的第一次尝试将包括一个带有链接函数的新指令，该指令根据范围内的某些值编译模板片段，包括或不包括 ui-sortable。

有空的时候写代码。