如何在 angular-ui 中动态禁用 ui-sortable 指令 [英] How to dynamically disable ui-sortable directive in angular-ui

问题描述

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

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.

推荐答案

angular 指令支持在 sortable 选项改变时进行观察:

The angular directive supports watching when the sortable options change:

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

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

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

这篇关于如何在 angular-ui 中动态禁用 ui-sortable 指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！