javascript - AngularJS design pattern for ng-repeating over an array of arrays -

मैं इसे बहुत सरल बनाऊँगा मेरे पास है:

  & lt; div ng-repeat = "topLevelGroups में समूह" & gt; .... & lt; div ng-repeat = "समूह में आइटम.इसेज | फिल्टर: आइटमफ़िल्टर" & gt; .... & lt; / div & gt; & Lt; / div & gt;   
 ये सभी अच्छी तरह से और ठीक काम कर रहा है, लेकिन मैं "ग्राम" सभी में  फ़िल्टर परिणाम की कुल संख्या  कहीं और प्रदर्शित करना चाहता हूं  
 इसे पूरा करने के लिए, मैंने फिल्टर को नियंत्रक में स्थानांतरित कर दिया, जैसे:  
  & lt; div ng-repeat = "filterItems (समूह) में आइटम" & gt; // नियंत्रक में: $ scope.filterItems = समारोह (समूह) {var ret = $ filter ('filter') (g.items, $ scope.query); G.filteredItemCount = ret.length वापसी वापसी}; $ Scope.getTotalFiltered = function () {return $ scope.data.reduce (function (prev, cur) {return prev + cur.filteredItemCount}, 0)}   
 अतः, 
 
 
 
 
 
 
 
  
 
 
 
 
  
 
 
 यह सिर्फ ठीक काम कर रहा है, लेकिन यह हंसी की तरह महसूस करता है और मैं सोच रहा था कि क्या इस लक्ष्य को पूरा करने के लिए एक क्लीनर, और अधिक कोणीय तरीका है।  
 कोई इनपुट बहुत सराहना की है, धन्यवाद!   
 
 
 आपका कोड काम करेगा लेकिन यह इष्टतम नहीं है।  
 मैंने आपके jsFiddle कोड को बंद कर दिया और इसे प्रदर्शित करने के लिए लॉगिंग जोड़ा:  
 
 खोलें  
 अपने ब्राउज़र में कंसोल खोलें  
 इनपुट फ़ील्ड में कुछ टाइप करें और आप देखेंगे कि  filterItems  प्रत्येक बार  $ scope.query  परिवर्तन   
 तो यह क्यों है?  
 ठीक है, दो कारण हैं:  
 
 आपका फ़ंक्शन कॉल एनजी-दोहर में है इसलिए इसे कई बार कहा जाता है (अपेक्षित  
 
 आपके  filterItems  विधि के साथ एक समस्या है।  
 आपने  filterItems  असाइन किया है आंतरिक  एनजी-दोहराने के लिए विधि  इसलिए, कोणीय आपके लिए फ़ंक्शन के परिणाम को स्वचालित रूप से देखता है और जब वह बदलता है, तो 'ताज़ा करें'।  
 हालांकि, आपके  filterItems  कोड के अंदर आप डेटा को तत्काल परिवर्तन करते हैं Angular  g.filteredItemCount = ret.length  को एक और 'रीफ्रेश' करने के लिए जिससे आप इसे एक नया परिवर्तन का पता लगा सकते हैं।  
    
 तो क्या एक बेहतर तरीका है?  
 आपके मामले में मैं होगा:  
 
  $ scope.query   
 के लिए एक व्यूअर को परिभाषित करें अपने व्यूअर में डेटा फ़िल्टर करें और इसे अलग से संग्रहीत करें (मूल डेटा को छोड़ने के लिए)  एनजी-दोहराने  टैग   
 के साथ फ़िल्टर किए गए डेटा के माध्यम से लूप करें आपका कोड क्लीनर, तेज और अधिक कुशल होगा जो कि महत्वपूर्ण यदि आपका डेटा सेट बहुत बड़ा हो।  
 मैंने आपकी सुविधा के लिए जेएसएफडियल बनाया:  
 यदि आप कंसोल खोलते हैं, तो आप देखेंगे कि कोड केवल एक बार चलता है जब  $ scope.query  9 बार के बजाए बदलता है।  
 नतीजतन परिणाम एक ही है लेकिन पर्दे के पीछे काफी अंतर है ...  
 उम्मीद है कि मदद करता है!  
 
 अद्यतन:  
 बेहतर प्रदर्शन के लिए एक दृष्टिकोण है डेटा को पुनर्गठित करें (एक बार डेटा लोड करने के बाद)।  
 मैंने इसे प्रदर्शित करने के लिए नमूना कोड वाला एक जेएसएफडियल बनाया है:  
 डेटा को  forEach  चक्र और संभव के रूप में कई छोरों से बचने के लिए और  क्वेरी  ऑब्जेक्ट को सीधे निर्देश में आइटमों पर लागू करने की अनुमति दें।  
 यह बहुत मूल कोड की तरह दिखता है, लेकिन  गुंजाइश  के अंदर फ़िल्टरिंग कार्यों को कॉल करने की आवश्यकता के बिना।  
 यदि आपका एप्लिकेशन  $ scope.items  के प्रारूप में डेटा वितरित कर सकता है भी तेजी से हो सकता है और ऑप्टिमाइज़ेशन चरण को छोड़ा जा सकता है।  
 उम्मीद है कि मदद करता है!