एनजी-दोहराने में AngularJS "हेडर"

Question

मुझे एक समस्या है जो हाल ही में एक से अधिक मामलों में उगाई गई है, और मैं इसके बारे में जाने का सबसे अच्छा तरीका सोच रहा हूं। इसे बस बताने के लिए:

मेरे पास एक विशेष आइटम द्वारा क्रमबद्ध एनजी-दोहराने में डेटा प्रदर्शित किया जा रहा है। कहें कि इसे नाम से क्रमबद्ध किया गया है, उदाहरण के लिए। मेरे लक्ष्य वर्णानुक्रमित सूची में पत्र टूट जाता है पर हेडर है:

----A---- 
Abe Lincoln 
Adam Smith 
----B---- 
Barack Obama 
Barry Zuckercorn 
----C---- 
... 

और इतने पर।

बातें मैं कोशिश की है में शामिल हैं:

• नियंत्रक पूरी तरह से पुनः निर्माण मॉडल का डेटा के रूप में यह आता है के बाद, इसे मैन्युअल रूप से पत्र समूहों की एक सरणी में डाल। उदाहरण के लिए, मेरी सेवा में "पोस्ट" और मेरे नियंत्रक की एक सरणी है, सेवा अद्यतन के रूप में, मैन्युअल रूप से उन "पोस्ट" को "अक्षर समूह" की सरणी में घुमाती है। तो यह संभव है कि दो घोंसला एनजी-दोहराना

हालांकि, यह डेटा के भारी हेरफेर पर निर्भर करता है, और फ्लाई पर डेटा को सॉर्ट करने के लिए यह आसान नहीं है।

• जब मॉडल अद्यतन, नियंत्रक "डोप" मैन्युअल रूप से इसे माध्यम से कदम, जब पत्र में परिवर्तन, और उस तत्व (post.header = true) पर एक "शीर्षक" संपत्ति पिगीबैकिंग की जाँच करके डेटा है। फिर ng-repeat यह जांच सकता है कि वर्तमान में जिस तत्व पर है वह शीर्षलेख है, और डीओएम में कुछ और डालने के लिए ng-if का उपयोग करें।

यह थोड़ा क्लीनर महसूस करता है लेकिन एनजी-दोहराने के तरीके के कारण, शीर्षलेख तत्व को एनजी-दोहराने वाले तत्व के समान स्तर पर "शामिल" होना होता है। उदाहरण के लिए, यदि आप <tr> तत्वों पर एनजी-दोहराने करते हैं, इसका मतलब यह होगा यह, शीर्ष लेख के लिए एक और <tr> सम्मिलित करने के लिए असंभव हो जाएगा के बाद से विशेष तत्व<tr>

अंदर होने की और अंत में है, साथ उपरोक्त के समान पंक्तियां:

• नियंत्रक "कुंजी अनुक्रमणिका" की एक सूची बनाए रखता है - इसका उपरोक्त दूसरी विधि जैसे डेटा को संशोधित करने का लाभ नहीं है, लेकिन आम तौर पर समान तरीके से काम करता है।

संपादित करें:

मैं एक ब्लॉग पोस्ट here बताया गया हो कि मैं अंत में इस मुद्दे को संभाला लिखा है - Google समूह चर्चा नीचे इयान के जवाब से जुड़े करने के लिए धन्यवाद।

Answer 1

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

उदाहरण के लिए chunk by size filter here देखें। विशेष रूप से ध्यान दें कि आपके चुने हुए मूल्यों के लिए हैश मान बनाने के आसपास चर्चा।

Answer 2

मैंने एक छोटा सा निर्देश लिखा जो वस्तुओं को देखता है और सूची में पहले व्यक्ति को स्वचालित रूप से $ हेडर संपत्ति जोड़ता है।इसे इस तरह प्रयोग करें:

<div ng-repeat="item in data.items | orderBy:... | filter:... as filteredItems" header-list objects="filteredItems" header="getHeader"> 
    <div ng-show="item.$header">{{item.$header}}</div> 
    <div>Your normal content</div> 
</div> 

आप एक ऐसा फ़ंक्शन पारित कर सकते हैं जो आपकी इच्छानुसार हेडर बनाता है। फ़ंक्शन आपके दायरे में एक उदाहरण विधि या फ़ंक्शन हो सकता है। पहला अक्षर प्राप्त करने के लिए, अपने नियंत्रक में परिभाषित करें।

$scope.getHeader = function(item) { 
    return item.name.slice(0, 1); 
}, 

फ़िल्टर और ऑर्डर बदलते समय सूची स्वचालित रूप से अपडेट हो जाएगी।

app.module("...").directive('headerList', function() { 
    return { 
    restrict: 'A', 
    scope: { 
     objects: '=', 
     header: '=' // This must be a function or instance method 
    }, 
    link: function(scope) { 
     scope.$watch('objects', function() { 

     var lastHeader, currentHeader; 

     scope.objects.forEach(function (obj) { 
      // We pass obj twice, so it can be used is instance method or regular function that takes the object as argument. 
      currentHeader = scope.header.call(obj, obj); 

      // in order to display a header per type, we mark the first event of each kind as header 
      if (currentHeader !== lastHeader) { 
      obj.$header = currentHeader; 
      lastHeader = currentHeader; 
      } else { 
      obj.$header = null; 
      } 
     }); 

     }); 
    } 
    } 
});