angularjs - ng-repeat: एकल फ़ील्ड द्वारा फ़िल्टर करें




angularjs-filter (8)

मेरे पास उत्पादों की एक श्रृंखला है जो मैं एनजी-दोहराने का उपयोग कर दोहरा रहा हूं और उपयोग कर रहा हूं

<div ng-repeat="product in products | filter:by_colour"> 

इन उत्पादों को रंग से फ़िल्टर करने के लिए। फ़िल्टर काम कर रहा है लेकिन यदि उत्पाद का नाम / विवरण इत्यादि रंग होता है तो फ़िल्टर लागू होने के बाद उत्पाद बना रहता है।

मैं फ़िल्टर को केवल प्रत्येक फ़ील्ड के बजाय मेरे सरणी के रंग फ़ील्ड पर लागू करने के लिए कैसे सेट करूं?


आप ऑब्जेक्ट द्वारा उस ऑब्जेक्ट से फ़िल्टर कर सकते हैं, जिस पर आप उस पर फ़िल्टर करना चाहते हैं:

app.controller('FooCtrl', function($scope) {
   $scope.products = [
       { id: 1, name: 'test', color: 'red' },
       { id: 2, name: 'bob', color: 'blue' }
       /*... etc... */
   ];
});
<div ng-repeat="product in products | filter: { color: 'red' }"> 

मार्क राजकोक ने सुझाव दिया कि यह निश्चित रूप से चर द्वारा पारित किया जा सकता है।


आपको filter:{color_name:by_colour} उपयोग करना होगा filter:{color_name:by_colour} इसके बजाय filter:{color_name:by_colour}

filter:by_colour

यदि आप किसी ऑब्जेक्ट की एक ही संपत्ति से मेल खाना चाहते हैं, तो ऑब्जेक्ट की बजाय उस प्रॉपर्टी को लिखें, अन्यथा कुछ अन्य संपत्ति मिल जाएगी।


कोणीय फ़िल्टर से सावधान रहें। यदि आप फ़ील्ड में विशिष्ट मान चुनना चाहते हैं, तो आप फ़िल्टर का उपयोग नहीं कर सकते हैं।

उदाहरण:

जावास्क्रिप्ट

app.controller('FooCtrl', function($scope) {
   $scope.products = [
       { id: 1, name: 'test', color: 'lightblue' },
       { id: 2, name: 'bob', color: 'blue' }
       /*... etc... */
   ];
});

एचटीएमएल

<div ng-repeat="product in products | filter: { color: 'blue' }"> 

यह दोनों का चयन करेगा, क्योंकि substr तरह कुछ उपयोग करें
इसका मतलब है कि आप उस उत्पाद का चयन करना चाहते हैं जहां "रंग" में स्ट्रिंग "नीली" होती है और जहां "रंग" "नीला" नहीं होता है।


फ़िल्टर में संपत्ति निर्दिष्ट करें, जिस ऑब्जेक्ट पर आप फ़िल्टर लागू करना चाहते हैं:

//Suppose Object
var users = [{
  "firstname": "XYZ",
  "lastname": "ABC",
  "Address": "HOUSE NO-1, Example Street, Example Town"
},
{
  "firstname": "QWE",
  "lastname": "YUIKJH",
  "Address": "HOUSE NO-11, Example Street1, Example Town1"
}]

लेकिन आप केवल प्रथम नाम पर फ़िल्टर लागू करना चाहते हैं

<input type = "text" ng-model = "first_name_model"/>
<div ng-repeat="user in users| filter:{ firstname: first_name_model}">

यदि आप दिए गए ऑब्जेक्ट के पोते (या गहरे) पर फ़िल्टर करना चाहते हैं, तो आप अपना ऑब्जेक्ट पदानुक्रम बनाना जारी रख सकते हैं। उदाहरण के लिए, यदि आप 'thing.properties.title' पर फ़िल्टर करना चाहते हैं, तो आप निम्न कार्य कर सकते हैं:

<div ng-repeat="thing in things | filter: { properties: { title: title_filter } }">

आप किसी ऑब्जेक्ट के एकाधिक गुणों पर फ़िल्टर कर सकते हैं बस उन्हें अपने फ़िल्टर ऑब्जेक्ट में जोड़कर:

<div ng-repeat="thing in things | filter: { properties: { title: title_filter, id: id_filter } }">

यदि आप निम्नलिखित करना चाहते थे:

<li class="active-item" ng-repeat="item in mc.pageData.items | filter: { itemTypeId: 2, itemStatus: 1 } | orderBy : 'listIndex'"
                id="{{item.id}}">
    <span class="item-title">{{preference.itemTitle}}</span>
</li>

... आपको केवल आइटम टाइप आइटम 2 और आइटमस्टैटस 1 नहीं मिलेगा, लेकिन आपको आइटम टाइप 20, 22, 202, 123 और आइटमस्टैटस 10, 11, 101, 123 के साथ आइटम भी मिलेंगे। ऐसा इसलिए है क्योंकि फ़िल्टर: {.. ।} सिंटैक्स काम करता है जैसे स्ट्रिंग में क्वेरी होती है।

हालांकि, अगर आप : सच्ची स्थिति जोड़ना चाहते थे, तो यह सटीक मिलान से फ़िल्टर करेगा:

<li class="active-item" ng-repeat="item in mc.pageData.items | filter: { itemTypeId: 2, itemStatus: 1 } : true | orderBy : 'listIndex'"
                id="{{item.id}}">
    <span class="item-title">{{preference.itemTitle}}</span>
</li>

संपत्ति निर्दिष्ट करें (यानी colour ) जहां आप फ़िल्टर को लागू करना चाहते हैं:

<div ng-repeat="product in products | filter:{ colour: by_colour }">

filter पेज पर उदाहरण देखें। ऑब्जेक्ट का प्रयोग करें, और कलर प्रॉपर्टी में रंग सेट करें:

Search by color: <input type="text" ng-model="search.color">
<div ng-repeat="product in products | filter:search"> 






angularjs-filter