मैन्युअल रूप से अपडेट करें कोणीय-यूआई यूआई-सॉर्ट करने योग्य आइटम

Question

अनिवार्य रूप से, मैं चाहता हूं कि उपयोगकर्ता किसी आइटम को खींचने और छोड़ने या सूची में किसी आइटम को स्थानांतरित करने के लिए ऊपर/नीचे तीरों पर क्लिक करने में सक्षम हों।

क्या आइटम्स इंडेक्स को अपडेट करने का कोई अच्छा तरीका है जो ui-sortable/angular-ui के साथ अच्छा खेलता है?

धन्यवाद।

अद्यतन

हम अपने नियंत्रक में एक समारोह है कि सरणी से आइटम को हटा दें और इसे फिर से जोड़ें एक सूचकांक अधिक से अधिक या अपनी मूल स्थिति की तुलना में कम में होगा जोड़कर इस का समाधान करने में सक्षम थे। यहाँ एक खराब उदाहरण है:

$scope.upDown = function(oldIndex, newIndex) { 
    var item = $scope.list[oldIndex]; 
    $scope.list.splice(oldIndex,1); 
    $scope.list.splice(newIndex,0,item); 
}; 

http://jsfiddle.net/69auq/1/

आप एक जांच जोड़ने के लिए अगर यह तदनुसार सरणी में पहला या अंतिम ELEM था निष्क्रिय करने के लिए या नीचे की आवश्यकता होगी।

Answer 1

हम अपने नियंत्रक में एक फ़ंक्शन जोड़कर इसे हल करने में सक्षम थे जो आइटम को सरणी से हटा देगा और इसे अपनी मूल स्थिति से अधिक या उससे कम एक सूचकांक में वापस जोड़ देगा। यहाँ एक खराब उदाहरण है:

$scope.upDown = function(oldIndex, newIndex) { 
    var item = $scope.list[oldIndex]; 
    $scope.list.splice(oldIndex,1); 
    $scope.list.splice(newIndex,0,item); 
}; 

http://jsfiddle.net/69auq/1/

आप एक जांच जोड़ने के लिए अगर यह तदनुसार सरणी में पहला या अंतिम ELEM था निष्क्रिय करने के लिए या नीचे की आवश्यकता होगी।

Answer 2

सब कुछ के साथ AngularJS, जवाब "think in Angular, not jQuery" है।

This CodePen यह अच्छा काम करता है कि यह कैसे करना है। असल में, आपके पास खींचने के लिए एक स्कॉम्ड अस्थायी वस्तु है, जिसे आप फिर ng-repeat की बाउंड सरणी में दबाते हैं। मैं इसके लिए क्रेडिट नहीं ले सकता (मेरी सृजन नहीं), लेकिन Google ने मुझे काफी जल्दी ले जाया। कोडपेन किसी बाहरी निर्भरता का उपयोग नहीं करता है, लेकिन जैसा कि आप देख सकते हैं, इसका अर्थ Angular-UI जैसे कुछ का उपयोग करने से थोड़ा अधिक काम है।

यहां a JSFiddle समान अवधारणा दिखा रहा है, लेकिन कोणीय-यूआई निर्भरता के साथ। कोणीय-ui का उपयोग करने का लाभ यह है कि अपने बाध्य डेटा सरणी केवल इस तरह के रूप में लागू किया जा करने की जरूरत है:

var myapp = angular.module('myapp', ['ui']); 

myapp.controller('controller', function ($scope) { 
    $scope.list = ["one", "two", "three", "four", "five", "six"]; 
}); 

यह अपनी ओर से भी कम काम का मतलब है, क्योंकि यह पहले से ही पता चल गया है। AngularJS jQuery के साथ अच्छी तरह से खेलने का अच्छा काम करता है, इसलिए यह आपके उपयोग के मामले के आधार पर, jQuery UI से विकास दृष्टिकोण में एक बड़ी बदलाव को निर्देशित नहीं करना चाहिए।