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




ng-repeat angular-filters (3)

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

   <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


आप एक ही एनजी-दोहराने वाले फ़िल्टर में 1 फ़ंक्शन फ़िल्टर को कॉल कर सकते हैं

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

इसे ठीक करने का सबसे आसान तरीका है $ सभी का उपयोग करना जो खोज है।

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

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

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

दस्तावेज यहां है

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


यदि आप कुछ कस्टम फ़िल्टर तर्क चलाने के लिए चाहते हैं तो आप एक फ़ंक्शन बना सकते हैं जो सरणी तत्व को तर्क के रूप में लेता है और यह खोज परिणामों में होना चाहिए या नहीं, इसके आधार पर true या false लौटाता true । फिर filter ऑब्जेक्ट को पास करें जैसे कि आप search ऑब्जेक्ट के साथ करते 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 ऑब्जेक्ट का उपयोग करके पिछले फ़िल्टर को हटाने के लिए मजबूर नहीं करता है (वे एक साथ काम करेंगे)।





angular-filters