2013-04-22 15 views
11

ui-sortableディレクティブを使用してソート可能なangle-uiを使用しています。スコープの状態に基づいてソート可能な機能を動的に有効/無効にすることは可能ですか?だから、私はスコープのプロパティの状態を変更するボタンを持っている必要があり、このプロパティはソート可能かどうかに応じて動作する必要があります。angle-uiでui-sortableディレクティブを動的に無効にする方法

答えて

0

この最初の試みでは、compilesのテンプレートフラグメントがスコープ内の値に基づいてui-sortableを含むか含まないかのリンク機能を持つ新しいdirectiveが含まれます。

時間があるときのコード。

0

ui-ifを使用すると、ui-sortableと非ソート可能なバージョンを切り替えることができますが、これは恐ろしいデザインです。しかし、jQuery Sortable Docsをチェックアウトした場合は、disabledのオプションがあるようです。ディレクティブがオプションオブジェクトの変更を現在監視している場合、このオプションを単に切り替えることができます。オプションオブジェクトが値ではなく参照によって監視されている場合、おそらくあなたは微調整を使ってプルリクエストを開くべきでしょうか?

18

角度ディレクティブは、ソート可能なオプションが変更されたときに見てサポートしています。

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

ありがとう!それが本当に助けになりました! – Whizkid747

+0

これは、angle-ui v0.4.0の場合とは異なります。スコープのためのsortable.jsでの検索。$ watchは結果を返しません。編集:バウワーの角度UIバージョンが古くなっているようです! –

+0

プラカードリンクが壊れています。 –

0

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; 
}; 
答えジェイソンため
関連する問題