एंगुलरजेएस में ऑब्जेक्ट प्रॉपर्टी द्वारा फ़िल्टर कैसे करें


139

मैं AngularJS में एक कस्टम फ़िल्टर बनाने की कोशिश कर रहा हूं जो एक विशिष्ट संपत्ति के मूल्यों द्वारा वस्तुओं की सूची को फ़िल्टर करेगा। इस मामले में, मैं "ध्रुवीयता" संपत्ति ("सकारात्मक", "तटस्थ", "नकारात्मक" के संभावित मूल्यों) को फ़िल्टर करना चाहता हूं।

यहाँ फ़िल्टर के बिना मेरा काम कोड है:

HTML:

<div class="total">
    <h2 id="totalTitle"></h2>
    <div>{{tweets.length}}</div>
    <div id="totalPos">{{tweets.length|posFilter}}</div>
    <div id="totalNeut">{{tweets.length|neutFilter}}</div>
    <div id="totalNeg">{{tweets.length|negFilter}}</div>
</div>

यहां JSON प्रारूप में "$ गुंजाइश.tweets" सरणी है:

{{created_at: "Date", text: "tweet text", user:{name: "user name", screen_name: "user       screen name", profile_image_url: "profile pic"}, retweet_count: "retweet count", polarity: "Positive"},
 {created_at: "Date", text: "tweet text", user:{name: "user name", screen_name: "user screen name", profile_image_url: "profile pic"}, retweet_count: "retweet count", polarity: "Positive"},
 {created_at: "Date", text: "tweet text", user:{name: "user name", screen_name: "user screen name", profile_image_url: "profile pic"}, retweet_count: "retweet count", polarity: "Positive"}}

सबसे अच्छा फिल्टर मैं इस प्रकार के साथ आ सकता है:

myAppModule.filter('posFilter', function(){
return function(tweets){
    var polarity;
    var posFilterArray = [];
    angular.forEach(tweets, function(tweet){
        polarity = tweet.polarity;
        console.log(polarity);
        if(polarity==='Positive'){
              posFilterArray.push(tweet);
        }
        //console.log(polarity);
    });
    return posFilterArray;
};
});

यह विधि एक खाली सरणी देता है। और "कंसोल.लॉग (ध्रुवता)" बयान से कुछ भी मुद्रित नहीं है। ऐसा लगता है जैसे मैं "ध्रुवता" की वस्तु संपत्ति तक पहुंचने के लिए सही पैरामीटर नहीं डाल रहा हूं।

कोई विचार? आपकी प्रतिक्रिया की बहुत सराहना की गई है।


3
अच्छा सवाल है, लेकिन कोड को कम किया जा सकता है, इसका बड़ा हिस्सा सवाल के लिए प्रासंगिक नहीं है।
सेटेक

जवाबों:


218

आपको बस filterफ़िल्टर का उपयोग करना होगा ( दस्तावेज़ देखें ):

<div id="totalPos">{{(tweets | filter:{polarity:'Positive'}).length}}</div>
<div id="totalNeut">{{(tweets | filter:{polarity:'Neutral'}).length}}</div>
<div id="totalNeg">{{(tweets | filter:{polarity:'Negative'}).length}}</div>

Fiddle


1
क्या कस्टम फ़िल्टर को एनजी-रिपीट स्टेटमेंट के बाहर एनजी-क्लिक इवेंट में पास करके आइटम सूची को फ़िल्टर करने का एक तरीका है? इस मामले में, मैं परिणामों के ऊपर तीन "ध्रुवता" बटन रखना चाहता हूं जो रेटिंग के आधार पर फ़िल्टर करते हैं।
sh3nan1gans

2
मुझे समझ में नहीं आ रहा है। यदि आप फ़िल्टर करने के लिए ध्रुवता का चयन करना चाहते हैं, तो आप एक सादे पाठ के बजाय एक स्कोप वैरिएबल पास कर सकते हैं: filter:{polarity:polarityToFilter}जहाँ $scope.polarityToFilterतीन बटनों में से एक पर एक क्लिक द्वारा भरा जाता है। क्या यह आप करने की कोशिश कर रहे हैं?
ब्लैकहोल

ऐसा लगता है कि यह काम कर सकता है। हालाँकि, मेरे ऐप को अलग-अलग सूची आइटम को हटाने में सक्षम होना चाहिए।
sh3nan1gans

फ़िल्टरिंग के साथ समस्या यह है कि हर बार फ़िल्टर लागू करने पर एक नया सरणी बनाया जाता है जो फ़िल्टर किए गए आइटम और अनफ़िल्टर्ड सरणी में इसके मूल सूचकांक के बीच की टाई को तोड़ देता है। क्या टाई को बनाए रखने का एक तरीका है या एनजी-छिपाने का एकमात्र विकल्प है? यहाँ एनजी-छिपाने का उपयोग करके फ़िल्टरिंग के विकल्प के लिए एक ट्यूटोरियल है: bennadel.com/blog/…
sh3nan1gans

ngRepeat$index स्थानीय स्कोप पर एक प्रॉम्प्टि को उजागर करता है जिसका आप उपयोग भी कर सकते हैं।
ब्लैकहोल

27

प्रलेखन पूरा जवाब है। वैसे भी यह कैसे किया जाता है:

<input type="text" ng-model="filterValue">
<li ng-repeat="i in data | filter:{age:filterValue}:true"> {{i | json }}</li>

केवल सरणी ageमें फ़िल्टर करेगा dataऔर trueसटीक मिलान के लिए है।

गहरी छानने के लिए,

<li ng-repeat="i in data | filter:{$:filterValue}:true"> {{i}}</li>

$गहरी फिल्टर के लिए एक विशेष संपत्ति है और trueइसके बाद के संस्करण की तरह सटीक मिलान के लिए है।


सरल और साफ।
डरावना

क्या यह फ़िल्टर इनबिल्ट है या इसे Angular & AngularJS दोनों में लिखा जाना चाहिए?
पी सतीश पात्रो

23

आप इसे और अधिक गतिशील बनाने के लिए भी ऐसा कर सकते हैं।

<input name="filterByPolarity" data-ng-model="text.polarity"/>

फिर आप एनजी-रिपीट इस तरह देखेंगे

<div class="tweet" data-ng-repeat="tweet in tweets | filter:text"></div>

यह फ़िल्टर निश्चित रूप से केवल ध्रुवता द्वारा फ़िल्टर करने के लिए उपयोग किया जाएगा


5

हमारे पास नीचे जैसा संग्रह है:


यहां छवि विवरण दर्ज करें

वाक्य - विन्यास:

{{(Collection/array/list | filter:{Value : (object value)})[0].KeyName}}

उदाहरण:

{{(Collectionstatus | filter:{Value:dt.Status})[0].KeyName}}

-या-

वाक्य - विन्यास:

ng-bind="(input | filter)"

उदाहरण:

ng-bind="(Collectionstatus | filter:{Value:dt.Status})[0].KeyName"

4

आप यह कोशिश कर सकते हैं। ' मेरे नाम' के लिए काम करना गिरफ्तारी में एक संपत्ति है।

repeat="item in (tagWordOptions | filter:{ name: $select.search } ) track by $index
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.