कोणीय-ui

Question

में ui-sortable निर्देश को गतिशील रूप से अक्षम करने के लिए मैं ui-sortable निर्देश का उपयोग करके क्रमबद्ध करने के लिए कोणीय-UI का उपयोग कर रहा हूं। क्या स्कोप स्थिति के आधार पर क्रमिक रूप से क्रमबद्ध कार्यक्षमता को सक्षम/अक्षम करना संभव है? इसलिए मुझे एक बटन होना चाहिए जो स्कोप संपत्ति की स्थिति को बदलता है और इस संपत्ति के आधार पर क्रमबद्ध या तो काम करना चाहिए या नहीं।

Answer 1

इस पर मेरा पहला प्रयास एक लिंक फंक्शन के साथ एक नया directive शामिल होगा जिसमें compiles एक टेम्पलेट खंड शामिल है जिसमें स्कोप में कुछ मूल्य के आधार पर यूई-सॉर्टेबल शामिल है या नहीं।

कोड मेरे पास समय है।

Answer 2

आप ui-if का उपयोग ui-sortable संस्करण और एक गैर-क्रमबद्ध संस्करण के बीच टॉगल करने के लिए कर सकते हैं, हालांकि यह एक भयानक डिज़ाइन है। हालांकि अगर आपने jQuery Sortable Docs की जांच की है तो ऐसा लगता है कि disabled के लिए एक विकल्प है। यदि निर्देश वर्तमान में परिवर्तनों के लिए ऑब्जेक्ट ऑब्जेक्ट देखता है, तो आप बस इस विकल्प को टॉगल कर सकते हैं। यदि विकल्प ऑब्जेक्ट संदर्भ द्वारा देखा जाता है और मूल्य से नहीं, तो शायद आपको ट्विक के साथ पुल-अनुरोध खोलना चाहिए?

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

तो तुम सब करने की थी jQueryUI sortable प्रलेखन पर नज़र था, और प्लगइन पर सही संपत्ति अद्यतन:

Answer 3

कोणीय निर्देश जब sortable विकल्पों को बदलने देख समर्थन करता है।

एचटीएमएल

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

जे एस

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

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

Answer 4

एचटीएमएल

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

जे एस

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

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