कई लिंक

Question

का उपयोग करके AngularJS में एक सूची को फ़िल्टर करने के लिए कैसे करें मैं सूची को फ़िल्टर करने के तरीके पर बहुत सारे ट्यूटोरियल चला रहा हूं और मेरे सरल उपयोग-मामले के लिए कोई उदाहरण नहीं ढूंढ सकता।

मैं कई बटन है इस तरह के

<a href="#" id="filter-by-name">Name</a> 
<a href="#" id="filter-by-age">Age</a> 
<a href="#" id="filter-by-height">Height</a> 

के रूप में मैं var persons = {...} वस्तु है और मैं इसे

<div ng-repeat="person in persons"> 
    {{person.name...}} 
</div> 

की तरह प्रदर्शित मैं एक फ़िल्टर कैसे बनाऊं तो हर बार मैं से एक पर क्लिक करेंगे बटन सूची फ़िल्टर किया जाएगा?

मैं ng-repeat="person in persons | filter:filterPersons" जोड़ने की कोशिश की है और स्क्रिप्ट पक्ष पर लिखने के लिए:

$scope.filterPersons(person){ 
    if (person.name == "John") 
    return person; 
} 

लेकिन इस (? कैसे मैं एक और नाम से फ़िल्टर कर सकते हैं) केवल एक ही यूज-केस है - दूसरे शब्दों में - मैं फ़िल्टर को लिंक से कैसे जोड़ूं?

Answer 1

आप किसी भी अन्य चीज़ के साथ चर फ़िल्टर करने के लिए अपने फ़िल्टर को बाध्य कर सकते हैं। इसलिए जब आप उपयोगकर्ता को ng-repeat फ़िल्टर पैरा पर क्लिक करते हैं और उसे बाध्य करते हैं, तो आपको आवश्यक फ़िल्टर को दायरे में सेट करना है। देखें:

<div ng-app> 
    <span ng-click="myFilter = {type: 1}">Type 1</span> | 
    <span ng-click="myFilter = {type: 2}">Type 2</span> | 
    <span ng-click="myFilter = null">No filter</span> 
    <ul ng-controller="Test"> 
    <li ng-repeat="person in persons | filter:myFilter">{{person.name}}</li> 
    </ul> 
</div> 

function Test($scope) { 
    $scope.persons = [{type: 1, name: 'Caio'}, {type:2, name: 'Ary'}, {type:1, name: 'Camila'}]; 
} 

सूचना है कि myFilter जब उपयोगकर्ता फिल्टर क्लिक करता है बदल गया है, और है कि यह ng-repeat फिल्टर करने के लिए बाध्य है। Fiddle here। आप एक नया फ़िल्टर भी बना सकते हैं, लेकिन यह समाधान बहुत बेहतर है।

Answer 2

मेरी प्रतिक्रिया कैयो के समान ही है। मैं सिर्फ एक मौजूदा सरणी को फ़िल्टर करने का तरीका दिखाना चाहता था।

मेरे एनजी-दोहराने में मेरे पास एक खोज फ़िल्टर है जो शब्दों के माध्यम से जाता है। मैं टैब को एक स्ट्रिंग मैच की तलाश करना चाहता था। तो मैंने एक अतिरिक्त फ़िल्टर

<tr class="unEditableDrinks" ng-repeat="drink in unEditableDrinkList | orderBy:'-date'|limitTo:400|filter:search |filter:myFilter"> 
    <td>[[drink.name]]</td> 

मेरे पास केवल मेरी तालिका का शीर्ष हिस्सा है लेकिन यह रणनीति दिखाना चाहिए। MyFilter नामक दूसरा फ़िल्टर नीचे दिए गए बटन से जुड़ा हुआ है।

<div class="btn-group" role="group"> 
    <button type="button" class="btn btn-primary" ng-click="myFilter={name:'soda'}">Soda</button> 
</div> 
<div class="btn-group" role="group"> 
    <button type="button" class="btn btn-primary" ng-click="myFilter={name:'energy'}">Energy Drinks</button> 
</div> 

प्रत्येक बटन मैं एक जोड़ने के लिए सक्षम हूँ पर एनजी-क्लिक करें कि myFilter के माध्यम से चला जाता है और drink.name साथ टीडी खोज करता है। प्रत्येक एनजी-क्लिक में मैं नाम के मूल्य को खोजने के लिए सेट कर सकता हूं। इसलिए सोडा या ऊर्जा वाले प्रत्येक शीर्षक को फ़िल्टर किया जा सकता है।