आदेश के बाद Angularjs गलत $ सूचकांक

Question

मैं Angular.js में नया हूं और मेरी सरणी को सॉर्ट करने और उस सॉर्ट किए गए डेटा पर काम करने में कुछ समस्याएं हैं।

मेरे पास आइटमों की एक सूची है और इसे "Store.storeName" द्वारा क्रमबद्ध करना चाहते हैं, जो अब तक काम कर रहा है। लेकिन डेटा को सॉर्ट करने के बाद, मेरा डिलीट-फंक्शन अब काम नहीं कर रहा है। मुझे लगता है कि क्योंकि $ सूचकांक छँटाई के बाद गलत है, और इसलिए गलत डेटा हटा दिया गया है।

मैं इसे कैसे हल कर सकता हूं? डेटा को दायरे में लाने का आदेश देने और देखने में नहीं? उसको कैसे करे?

यहाँ कुछ प्रासंगिक कोड है:

दृश्य में:

<tr ng-repeat="item in items | orderBy:'Store.storeName'">
                <td><input class="toggle" type="checkbox" ng-model="item.Completed"></td>
                <td>{{item.Name}}</td>
                <td>{{item.Quantity}} Stk.</td>
                <td>{{item.Price || 0 | number:2}} €</td>                
                <td>{{item.Quantity*item.Price|| 0 | number:2}} €</td>
                <td>{{item.Store.storeName}}</td> 
                <td><a><img src="img/delete.png" ng-click="removeItem($index)">{{$index}}</a></td>
            </tr>

और मेरे नियंत्रक में मेरे पास यह डिलीट फ़ंक्शन है, जो विशिष्ट डेटा को हटाना चाहिए:

$scope.removeItem = function(index){
        $scope.items.splice(index,1);
    }

यह दृश्य में ऑर्डर करने से पहले अच्छी तरह से काम करता है। यदि कुछ महत्वपूर्ण याद आ रही है, तो कृपया मुझे अभी बताएं।

धन्यवाद!

Answer 1

इसके बजाय या उस पर relaying $index- जो - जैसा कि आपने देखा है - अनुक्रमित / फ़िल्टर किए गए सरणी में सूचकांक को इंगित करेगा, आप आइटम को अपने removeItemफ़ंक्शन में पास कर सकते हैं :

<a><img src="img/delete.png" ng-click="removeItem(item)">{{$index}}</a>

और एरे removeItemकी indexOfविधि का उपयोग करके एक इंडेक्स खोजने के लिए फ़ंक्शन को संशोधित करें :

$scope.removeItem = function(item){
   $scope.items.splice($scope.items.indexOf(item),1);
}

Comments

@ pkozlowski.opensource आप एक जीनियस हैं! आप एक आइटम पास कर सकते हैं, इंडेक्स नहीं .. वाह !! धन्यवाद दोस्त।

— good_evening

ऐरे इंडेक्सऑफ़ इंटरनेट एक्सप्लोरर 8 और लोअर में उपलब्ध नहीं है।

— पीटर हेडबर्ग

आदेश शीर्षक के बाद प्रश्न शीर्षक गलत $ सूचकांक के बारे में पूछ रहा है, जो इस उत्तर को संबोधित नहीं करता है। ऐसे मामले हैं जहां आपको सही $ सूचकांक मूल्य की आवश्यकता होती है (जैसे कि सूची पर शिफ्ट का चयन करना)। ऑर्डरबाय फ़िल्टर लागू होने के बाद हमें सही $ सूचकांक मूल्य कैसे मिलता है?

— ClearCloud8

आप कुछ इस प्रकार से टेम्पलेट के भीतर क्रमबद्ध सूची से एक नई सारणी बना सकते हैं: "एल इन ऑर्डर_अरे = (सरणी | फ़िल्टर: फ़िल्टर। ऑर्डरबाय: ऑर्डर_बी)"

— पोरल्यून

साफ! धन्यवाद भाई।

— CENT1PEDE

Answer 2

मैंने कोणीय सीखना शुरू कर दिया और इसी तरह की परेशानी का सामना करना पड़ा, और @ pkozlowski-उद्घाटन स्रोत के उत्तर के आधार पर, मैंने इसे कुछ इस तरह से हल किया

<a>
  <img src="img/delete.png" ng-click="removeItem(items.indexOf(item))">
  {{items.indexOf(item)}}
</a> 

Comments

यह कस्टम फ़िल्टर आदि बनाने के बजाय सबसे अच्छा और इतना सरल है .. +1

— राफिक मोहम्मद

यह कैसे सही जवाब नहीं है? इसने मेरी समस्या को हल किया

— साइरस ज़ी

Answer 3

मुझे भी यही समस्या थी और इस विषय में अन्य उत्तर मेरी स्थिति के लिए उपयुक्त नहीं हैं।

मैंने कस्टम फ़िल्टर के साथ अपनी समस्या हल कर ली है:

angular.module('utils', []).filter('index', function () {
    return function (array, index) {
        if (!index)
            index = 'index';
        for (var i = 0; i < array.length; ++i) {
            array[i][index] = i;
        }
        return array;
    };
});

जो इस तरह से इस्तेमाल किया जा सकता है:

<tr ng-repeat="item in items | index | orderBy:'Store.storeName'">

और फिर HTML में आप item.indexइसके बजाय उपयोग कर सकते हैं $index।

यह विधि वस्तुओं के संग्रह के लिए उपयुक्त है।

कृपया, इस बात पर ध्यान दें कि यह कस्टम फ़िल्टर लागू किए गए सभी फ़िल्टर (ऑर्डरबाय आदि) की सूची में पहला होना चाहिए और यह indexसंग्रह के प्रत्येक ऑब्जेक्ट में अतिरिक्त संपत्ति (नाम अनुकूलन योग्य है) जोड़ देगा ।

Comments

क्या आप इस बारे में विस्तार से बता सकते हैं कि अन्य उत्तर आपकी स्थिति के लिए उपयुक्त क्यों नहीं हैं?

— pkozlowski.opensource

@ pkozlowski.opensource यह बहुत साफ है। यह भी निर्भर करता है कि किन घटनाओं को संलग्न किया जा सकता है, और इंडेक्सऑफ में वस्तुओं की जटिलता कहीं अधिक कुशल है। $scope.items.splice($scope.items.indexOf(item),1);डुप्लिकेट आइटम के लिए अपेक्षित के रूप में भी काम नहीं करेगा।

— मार्टिन

@ स्मार्टइन आपको वास्तविक संख्या के साथ प्रदर्शन के बारे में अपने दावों का समर्थन करना चाहिए। एक फ़िल्टर का प्रत्येक $ पच चक्र पर निष्पादित होने का बहुत बड़ा नुकसान है, इसलिए मुझे नहीं लगता कि यह प्रदर्शन में मदद करता है ...

— pkozlowski.opensource

@ pkozlowski.opensource यह सच है, और यह प्रत्येक $ पच चक्र के लिए दो बार चलता है। महत्वपूर्ण बात यह है कि "इस बात पर निर्भर करता है कि कौन सी घटनाओं को संलग्न किया जा सकता है", प्रदर्शन मायने रखता है जब आपके पास दर का कोई नियंत्रण नहीं होता है, उदाहरण के लिए, अन-थ्रॉटल स्क्रॉल घटना - चरम मामला जो मुझे पता है।

— मार्टिन

@ माइल वेल मेरे पास डुप्लिकेट है और यही वह चीज है जिसकी मुझे तलाश थी, बस थोड़ा सा दुख है कि एंगुलर $ चर में ट्रैक या मूल इंडेक्स नहीं रखता है। मैंने कोशिश की (key, item) in itemsऔर यह भी काम नहीं करता है। (कुंजी को मूल नहीं रखा गया है)

— रूचे

Answer 4

इसे इस्तेमाल करे:

$scope.remove = function(subtask) {

    var idx = $scope.subtasks.indexOf(subtask),
        st = $scope.currentTask.subtasks[idx];

    // remove from DB
    SubTask.remove({'subtaskId': subtask.id});

    // remove from local array
    $scope.subtasks.splice(idx,1);

}

आप इस प्रविष्टि में मेरे ब्लॉग में वर्बोज़ स्पष्टीकरण पा सकते हैं ।

Answer 5

यदि किसी को उपयोग करने की आवश्यकता होती है $index, तो आप सॉर्ट / फ़िल्टर किए गए सरणी को एक नाम दे सकते हैं:

<tr ng-repeat="item in sortedItems = (items | orderBy:'Store.storeName') track by $index">

मेरा जवाब यहां देखें ।

Comments

मुझे लगता है कि यह जवाब ठीक है, अगर विस्तार पर कमी है। मुझे लगता है कि hmk का क्या मतलब है कि एक बार फ़िल्टर की गई सूची को एक तरफ सेट कर दिया गया है, जैसा कि ऊपर दिया गया है, वांछित प्रविष्टि को पुनः प्राप्त करने के लिए इसके विरुद्ध सूचकांक का उपयोग किया जा सकता है (अर्थात "SortedItems [$ index]")।

— जेरेमीथफ

Answer 6

मैं सिर्फ एक टिप्पणी छोड़ दिया है, लेकिन मैं "प्रतिष्ठा" नहीं है।

मील का हल वास्तव में मैं भी क्या जरूरत है। Pkozlowski.opensource के प्रश्न का उत्तर देने के लिए: जब आपके पास या तो नेस्टेड ngRepeats है, तो एक डायनामिक सूची (जैसे जहाँ आप निष्कासन की अनुमति देते हैं), या दोनों (जो मेरा मामला है), $indexकाम नहीं करता है क्योंकि यह बैक-एंड के लिए गलत इंडेक्स होगा ngInitमूल्य को कैश करने के लिए सॉर्ट करने और उपयोग करने के बाद डेटा काम नहीं करता है क्योंकि सूची में परिवर्तन होने पर इसका पुनर्मूल्यांकन नहीं किया जाता है।

ध्यान दें कि मील का हल एक पैरामीटर पास करके संलग्न सूचकांक संपत्ति के नाम को अनुकूलित करने की अनुमति देता है <tr ng-repeat="item in items | index:'originalPosition' | orderBy:'Store.storeName'">

मेरा बनाया संस्करण:

.filter( 'repeatIndex', function repeatIndex()
{
// This filter must be called AFTER 'filter'ing 
//  and BEFORE 'orderBy' to be useful.
    return( function( array, index_name )
    {
        index_name = index_name || 'index';
        array.forEach( function( each, i )
        {each[ index_name ] = i;});
        return( array );
    });
})