एंगुलरजेएस - श्रेणियों आदि पर आधारित जटिल फ़िल्टरिंग

Question

मैंने कुछ google-fu किया है लेकिन मैं AngularJS फ़िल्टर के बारे में सभी को सरल फ़िल्टर (ज्यादातर एक फ़ील्ड के मान पर) के बारे में सरल उदाहरण मिल सकता हूं।

थोगूह के बाद मैं कुछ और जटिल हूं, और मैं अपनी स्थिति से निपटने के तरीके पर सहायता की तलाश करता हूं।

कल्पना कीजिए कि आप निम्नलिखित JSON ऑब्जेक्ट की एक सरणी है:

{ 
    "id":"1", 
    "title":"Title", 
    "categories":[ 
     {"id":"14","name":"DIY"} 
    ], 
    "topics":[ 
     {"id":"12","name":"Junk Food"} 
    ] 
}, 
{ 
    "id":"2", 
    "title":"Title 2", 
    "categories":[ 
     {"id":"4","name":"Test"}, 
     {"id":"14","name":"DIY"}, 
    ], 
    "topics":[ 
     {"id":"2","name":"Food"} 
    ] 
} 

[...] 

तो मूल रूप से प्रत्येक वस्तु "श्रेणियों" और/या "विषयों" की किसी भी संख्या हो सकती है।

अब, मेरा लक्ष्य एक फ्रंटएंड इंटरफ़ेस बनाना है जो मुझे उन JSON ऑब्जेक्ट्स पर संचयी रूप से विभिन्न प्रकार के फ़िल्टर लागू करने की अनुमति देता है।

उदाहरण के लिए, मैं कहना चाहूंगा: केवल उन प्रविष्टियों को दिखाएं जिनमें category.id = 14 और topic.id = 2 [etc] हैं और अभी भी फ़िल्टर किए गए परिणामों के लिए गहरे लिंकिंग का समर्थन करते हैं।

तो यहाँ है जहाँ मैं अटक कर रहा हूँ:

1) सबसे अच्छा तरीका है इस के लिए मार्गों का उपयोग करने के क्या (आप कैसे यूआरएल संरचना फिल्टर के किसी भी संख्या का समर्थन करने के हैं यानी (विभिन्न मूल्यों के आधार पर)

2) मुझे जोड़े गए फ़िल्टर का ट्रैक कैसे रखना चाहिए?

वस्तु:: एक पैटर्न वस्तु (यानी, कितने और कौन-से फ़िल्टर उपयोगकर्ता द्वारा चयनित किया गया है)

AngularJS filters के लिए दस्तावेज़ को देखते हुए मैं स्पष्ट रूप से 2 उदाहरण छानने पैरामीटर के लिए इस्तेमाल करेंगे सरणी द्वारा निहित वस्तुओं पर विशिष्ट गुणों को फ़िल्टर करने के लिए इस्तेमाल किया जा सकता है। उदाहरण के लिए {name: "एम", फोन: "1"} भविष्यवाणी उन वस्तुओं की एक सरणी लौटाएगी जिनमें संपत्ति नाम "एम" और "1" युक्त संपत्ति फोन है। ऑब्जेक्ट की किसी भी संपत्ति के खिलाफ एक मैच स्वीकार करने के लिए एक विशेष संपत्ति नाम $ का उपयोग किया जा सकता है (जैसे {$: "text"})। यह ऊपर वर्णित स्ट्रिंग के साथ सरल सबस्ट्रिंग मैच के बराबर है।

लेकिन मैं कैसे यकीन है कि मैं सही क्षेत्र की जाँच कर रहा हूँ (यानी topic.id विषयों श्रेणियों के लिए category.id बनाम के लिए) बनाने के लिए पर इतना यकीन नहीं कर रहा हूँ ...

सीधे शब्दों में कहें, मैं इस तरह के कम-तुच्छ फ़िल्टरिंग परिदृश्य के लिए एक उदाहरण देखना पसंद है।

Answer 1

मुझे लगता है कि आपको इसके बजाय this जैसे कुछ चाहिए। उसका 'अन्य सरल विकल्प' देखें। मैं एक ऐसे सेवा में जटिल फ़िल्टरिंग करता हूं जो मेरे नियंत्रक में इंजेक्शन दिया जाता है, और दृश्य में मेरे $ दायरे पर फ़िल्टर की गई सूची का पर्दाफाश करता है। मैं अपेक्षाकृत सरल कार्यों के लिए केवल कोणीय फ़िल्टर का उपयोग करता हूं।

पुन: यूआरएल पर इसका खुलासा करने के बारे में सवाल, आपको स्ट्रिंग्स के रूप में उन फ़िल्टरों का प्रतिनिधित्व करने के कुछ तरीके की आवश्यकता होगी, और $ नियंत्रक और $ रूट पैराम का उपयोग अपने नियंत्रक में पॉप्युलेट करने के लिए कर सकते हैं।

Answer 2

यदि आप कोई कस्टम फ़िल्टर बारे में काम कर सकते हैं:

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

module.filter("property", ["$filter", function($filter){ 
    var parseString = function(input){ 
     return input.split("."); 
    } 

    function getValue(element, propertyArray) { 
     var value = element; 

     angular.forEach(propertyArray, function(property) { 
      value = value[property]; 
     }); 

     return value; 
    } 

    return function (array, propertyString, target) { 
     var properties = parseString(propertyString); 

     return $filter('filter')(array, function(item){ 
      return getValue(item, properties) == target; 
     }); 
    } 
}]); 

एचटीएमएल हिस्सा इस तरह दिख सकता:

<ul>   
    <li ng-repeat="data in items | property:'categories.id':<id_of_a_category_we_want>"> 
     {{ data }} 
    </li> 
</ul> 

क्रेडिट: OnOFF-Switch blog