एंगुलरजेएस: कस्टम फ़िल्टर और एनजी-दोहराना

Question

मैं एक कोणीय जेएस नौसिखिया हूं और मैं एक छोटे से प्रमाण-अवधारणा कार किराए पर लेने वाले ऐप का निर्माण कर रहा हूं जो कुछ JSON में खींचता है और उस डेटा के विभिन्न बिट्स को एनजी के माध्यम से प्रस्तुत करता है -repeat, फिल्टर के एक जोड़े के साथ:

<article data-ng-repeat="result in results | filter:search" class="result"> 
     <header><h3>{{result.carType.name}}, {{result.carDetails.doors}} door, &pound;{{result.price.value}} - {{ result.company.name }}</h3></header> 
      <ul class="result-features"> 
       <li>{{result.carDetails.hireDuration}} day hire</li> 
       <li data-ng-show="result.carDetails.airCon">Air conditioning</li> 
       <li data-ng-show="result.carDetails.unlimitedMileage">Unlimited Mileage</li> 
       <li data-ng-show="result.carDetails.theftProtection">Theft Protection</li> 
      </ul> 
    </article> 

    <h2>Filters</h2> 

    <h4>Doors:</h4> 
    <select data-ng-model="search.carDetails"> 
     <option value="">All</option> 
     <option value="2">2</option> 
     <option value="4">4</option> 
     <option value="9">9</option> 
    </select> 

    <h4>Provider:</h4> 
    Atlas Choice <input type="checkbox" data-ng-model="search.company" ng-true-value="Atlas Choice" ng-false-value="" value="Atlas Choice" /><br> 
    Holiday Autos <input type="checkbox" data-ng-model="search.company" ng-true-value="Holiday Autos" ng-false-value="" value="Holiday Autos" /><br> 
    Avis <input type="checkbox" data-ng-model="search.company" ng-true-value="Avis" ng-false-value="" value="Avis" /><br>  

अब मैं अपने नियंत्रक में एक कस्टम फ़िल्टर बनाना चाहते हैं, कि मेरी एनजी-दोहराने में से अधिक आइटम पुनरावृति और केवल उन आइटम को कुछ मानदंडों को पूरा लौट सकते हैं - के लिए उदाहरण के लिए, मैं 'प्रदाता' चेकबॉक्स की जांच के आधार पर मूल्यों की एक सरणी बना सकता हूं, उसके बाद प्रत्येक एनजी-दोहराना आइटम का मूल्यांकन कर सकता हूं। सिंटैक्स के संदर्भ में, मैं बस यह नहीं कर सकता कि मैं ऐसा कैसे करूं - क्या कोई मदद कर सकता है? http://plnkr.co/edit/lNJNYagMC2rszbSOF95k?p=preview

Answer 1

आप कुछ कस्टम फ़िल्टर तर्क आप एक समारोह जो एक तर्क के रूप सरणी तत्व लेता है और true या false देता है कि क्या यह होना चाहिए के आधार पर बना सकते हैं चलाना चाहते हैं खोज परिणामों में। तो फिर यह filter अनुदेश को पारित search वस्तु के साथ आप की तरह करते हैं, उदाहरण के लिए:

जे एस:

$scope.filterFn = function(car) 
{ 
    // Do some tests 

    if(car.carDetails.doors > 2) 
    { 
     return true; // this will be listed in the results 
    } 

    return false; // otherwise it won't be within the results 
}; 

HTML:

... 
<article data-ng-repeat="result in results | filter:search | filter:filterFn" class="result"> 
... 

आप आप देख सकते हैं कई फिल्टर एक साथ श्रृंखला कर सकते हैं, इसलिए अपना कस्टम फ़िल्टर फ़ंक्शन जोड़ना आपको search objec का उपयोग करके पिछले फ़िल्टर को हटाने के लिए मजबूर नहीं करता है टी (वे एक साथ काम करेंगे)।

Answer 2

इस $ जो सभी खोज है उपयोग करने के लिए है ठीक करने के लिए सबसे आसान तरीकों में से एक:

यहाँ मेरी Plunker है।

यहां एक प्लंकर है जो इसे दिखाता है। मैं रेडियो के लिए चेक बॉक्स बदल दिया है (क्योंकि मैंने सोचा कि वे पूरक होना चाहिए) ..

http://plnkr.co/edit/dHzvm6hR5P8G4wPuTxoi?p=preview

यदि आप ऐसा करने (के बजाय एक सामान्य खोज कर रही है) आप कार्यों के साथ काम की जरूरत है की एक बहुत ही विशिष्ट तरीके से चाहते हैं खोज में

प्रलेखन यहाँ है

http://docs.angularjs.org/api/ng.filter:filter

Answer 3

आप अभी भी आप फ़िल्टर को खोज मॉडल में पारित कर सकते हैं कस्टम फ़िल्टर करना चाहते हैं:

<article data-ng-repeat="result in results | cartypefilter:search" class="result"> 

कहाँ cartypefilter के लिए परिभाषा इस तरह दिख सकता:

app.filter('cartypefilter', function() { 
    return function(items, search) { 
    if (!search) { 
     return items; 
    } 

    var carType = search.carType; 
    if (!carType || '' === carType) { 
     return items; 
    } 

    return items.filter(function(element, index, array) { 
     return element.carType.name === search.carType; 
    }); 

    }; 
}); 

http://plnkr.co/edit/kBcUIayO8tQsTTjTA2vO?p=preview

Answer 4

आप एक ही एनजी-दोहराने वाले फ़िल्टर

में 1 फ़ंक्शन फ़िल्टर को कॉल कर सकते हैं

<article data-ng-repeat="result in results | filter:search() | filter:filterFn()" class="result">