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

我的第一次尝试将包括一个新的directive，其链接函数compiles模板片段包括或不包括基于范围内某些值的ui-sortable。

我有时间的代码。

Answer 3

您可以使用ui-if在ui-sortable版本和不可排序版本之间切换，但这是一个糟糕的设计。但是，如果您查看了jQuery Sortable Docs，则disabled似乎有一个选项。如果指令当前正在查看选项对象以进行更改，则只需切换此选项即可。如果通过引用而不是值来监视选项对象，那么也许您应该通过调整打开一个pull-request？

Answer 4

HTML

mongoose.Promise = Promise;

JS

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

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

4 个答案: