कोणीयज फिल्टर को तर्क पास करना


99

क्या फिल्टर फ़ंक्शन के लिए एक तर्क पारित करना संभव है ताकि आप किसी भी नाम से फ़िल्टर कर सकें?

कुछ इस तरह

$scope.weDontLike = function(item, name) {
    console.log(arguments);
    return item.name != name;
};

जवाबों:


223

वास्तव में एक और (शायद बेहतर समाधान) है जहां आप कोणीय के मूल 'फिल्टर' फिल्टर का उपयोग कर सकते हैं और अभी भी अपने कस्टम फ़िल्टर के लिए तर्क पास कर सकते हैं।

निम्नलिखित कोड पर विचार करें:

<div ng-repeat="group in groups">
    <li ng-repeat="friend in friends | filter:weDontLike(group.enemy.name)">
        <span>{{friend.name}}</span>
    <li>
</div>

इस कार्य को करने के लिए आप अपने फ़िल्टर को निम्नलिखित के रूप में परिभाषित करते हैं:

$scope.weDontLike = function(name) {
    return function(friend) {
        return friend.name != name;
    }
}

जैसा कि आप यहां देख सकते हैं, weDontLike वास्तव में एक और फ़ंक्शन देता है जिसमें आपके पैरामीटर के साथ-साथ फ़िल्टर से आने वाली मूल वस्तु भी होती है।

मुझे यह महसूस करने में 2 दिन लगे कि आप यह कर सकते हैं, इस समाधान को अभी तक कहीं नहीं देखा है।

चेकआउट एक कोणीय.जेएस फिल्टर के रिवर्स पोलरिटी को देखने के लिए कि आप फ़िल्टर के साथ अन्य उपयोगी संचालन के लिए इसका उपयोग कैसे कर सकते हैं।


यदि आपके फ़िल्टर को कई तर्कों की आवश्यकता होती है, तो देखें कि मैं कई तर्कों के साथ Angular.js फ़िल्टर कैसे कहूं?
nh2

इस पद्धति ने एक अजीब मुद्दे को भी हल किया, जहां एनजी-रिपीट के अंदर मैं अपने स्वयं के मापदंडों को अपने फिल्टर में पास नहीं कर सका। इससे कोई फर्क नहीं पड़ता कि मैंने जो किया वह सूचकांक और समग्र संग्रह के रूप में वापस आता रहा। इस वापसी विधि को करके मैं अपने मापदंडों को पारित करने में सक्षम था और अभी भी मूल तत्व को लोड कर रहा था, बहुत अच्छा!
डेनिस स्मोलेक

इस उत्तर ने मेरी समस्या को हल कर दिया, जहाँ मैं फ़िल्टर फंक्शन के पैरामीटर के रूप में $ स्कोप वैरिएबल पास करने में सक्षम नहीं था। सबसे अच्छा उपाय। Upvoted!
वलाफ़र

अगर मैं इसे एक से अधिक बार बढ़ा सकता हूं, तो मुझे यकीन है कि यह एसओ के इतिहास में सबसे उत्कीर्ण उत्तर था। यह मेरे लिए सालों से गंदगी को दूर कर रहा है ... और फिर मुझे इसका (अब 2 साल का) जवाब मिला ... बहुत अविश्वसनीय रूप से धन्यवाद।
PKD

2019 में अभी भी उपयोगी है! बहुत बहुत धन्यवाद।
ashilon

76

जो मैं समझता हूं कि आप एक फिल्टर फ़ंक्शन ('फिल्टर' फिल्टर का उपयोग करते समय) एक तर्क पारित नहीं कर सकते। कस्टम फ़िल्टर लिखने के लिए आपको क्या करना होगा, इस तरह से देखें:

.filter('weDontLike', function(){

return function(items, name){

    var arrayToReturn = [];        
    for (var i=0; i<items.length; i++){
        if (items[i].name != name) {
            arrayToReturn.push(items[i]);
        }
    }

    return arrayToReturn;
};

यहाँ काम कर रहा है jsFiddle: http://jsfiddle.net/pkozlowski_opensource/myr4n/1/

अन्य सरल विकल्प, बिना कस्टम फ़िल्टर लिखना एक नाम को एक दायरे में फ़िल्टर करने के लिए संग्रहीत करना है और फिर लिखना है:

$scope.weDontLike = function(item) {
  return item.name != $scope.name;
};

Thats प्रीफेक्ट धन्यवाद! स्कोप में नाम संचय करना इतना अच्छा काम नहीं करेगा, क्योंकि मेरे पास एक ही पेज से एक ही डेटा से तीन लिस्ट अलग-अलग राज्यों (या नामों) के साथ फ़िल्टर होती हैं।
आकारशरीर

गतिशील रूप से 'एडम' (अपने JSFiddle का जिक्र) सेट करने के लिए कोई भी? यह असंभव लगता है (और मुझे लगता है कि यह उद्देश्य पर है) एनकोमॉडल और एक कस्टम फ़िल्टर कोणीय में संयोजित करने के लिए ...
रॉल्फ

क्या किसी फ़िल्टर के मापदंडों को फिर से बनाना संभव है? उदाहरण के लिए किसी फ़िल्टर के दूसरे पैरामीटर में आइटम को पास करें?
पूयज

यह ध्यान देने योग्य है कि इस उदाहरण में मार्कअप {{आइटम | weDontLike: 'thenameyoudontlike'}} ... अभी आपको इसे प्राप्त करने के लिए फिडेल पर जाना है। यह भी ध्यान देने योग्य है कि आप अपने कस्टम फ़िल्टर {{आइटम | weDontLike: 'thename': ['I am', 'a array']: 'and so on'}} आप अपने कस्टम फिल्टर में और अधिक तर्क जोड़ेंगे ताकि उन तक पहुंच हो सके।
बेंजामिन कॉन्वेंट

62

वास्तव में आप एक पैरामीटर ( http://docs.angularjs.org/api/ng.filter:filter ) पास कर सकते हैं और इसके लिए केवल कस्टम फ़ंक्शन की आवश्यकता नहीं है। यदि आप अपने HTML को फिर से लिखेंगे तो यह काम करेगा:

<div ng:app>
 <div ng-controller="HelloCntl">
 <ul>
    <li ng-repeat="friend in friends | filter:{name:'!Adam'}">
        <span>{{friend.name}}</span>
        <span>{{friend.phone}}</span>
    </li>
 </ul>
 </div>
</div>

http://jsfiddle.net/ZfGx4/59/


8
हाँ। साइड नोट - अगर किसी का नाम 'एडम' है, तो आप उसे {नाम: '!! एडम'} की तरह ले सकते हैं।
honzajde

5
आप यहाँ भी एरेज़ पास कर सकते हैंfilter:['Adam', 'john']
iConnor

6
jsfiddle लिंक टूट गया है।
सेरगेवथ्रिन

4
एडम अब तक का सबसे खराब नाम है
बेन व्हीलर

6
नहीं-नहीं-एडम स्पष्ट रूप से बदतर है।
ट्वीप

30

आप बस इस तरह टेम्पलेट में कर सकते हैं

<span ng-cloak>{{amount |firstFiler:'firstArgument':'secondArgument' }}</span>

फ़िल्टर में

angular.module("app")
.filter("firstFiler",function(){

    console.log("filter loads");
    return function(items, firstArgument,secondArgument){
        console.log("item is ",items); // it is value upon which you have to filter
        console.log("firstArgument is ",firstArgument);
        console.log("secondArgument ",secondArgument);

        return "hello";
    }
    });

यह सबसे अच्छा जवाब है। यह गतिशील वस्तुओं के साथ काम करता है। यह स्वीकृत उत्तर होना चाहिए।
abelabbesnabi

2

Pkozlowski.opensource के उत्तर पर विस्तार करना और जावास्क्रिप्ट बेसिनarray's फिल्टर विधि का उपयोग करके एक पूर्वनिर्धारित समाधान यह हो सकता है:

.filter('weDontLike', function(){
    return function(items, name){
        return items.filter(function(item) {
            return item.name != name;
        });
    };
});

यहाँ jsfiddle लिंक है

यहां ऐरे फिल्टर पर अधिक ।


1

आप कोणीय फिल्टर के लिए कई तर्क पारित कर सकते हैं!

मेरे कोणीय ऐप और एक ऐप स्तर चर को परिभाषित करना -

var app = angular.module('filterApp',[]);
app.value('test_obj', {'TEST' : 'test be check se'});

आपका फ़िल्टर इस तरह होगा: -

app.filter('testFilter', [ 'test_obj', function(test_obj) {
    function test_filter_function(key, dynamic_data) {
      if(dynamic_data){
        var temp = test_obj[key]; 
        for(var property in dynamic_data){
            temp = temp.replace(property, dynamic_data[property]);
        }
        return temp;
      }
      else{
        return test_obj[key] || key;
      }

    }
    test_filter_function.$stateful = true;
    return test_filter_function;
  }]);

और HTML से आप डेटा भेजेंगे जैसे: -

<span ng-bind="'TEST' | testFilter: { 'be': val, 'se': value2 }"></span>

यहाँ मैं फ़िल्टर के लिए एक JSON ऑब्जेक्ट भेज रहा हूँ। आप किसी भी तरह का डेटा जैसे स्ट्रिंग या नंबर भी भेज सकते हैं।

यह भी कि आप फ़िल्टर करने के लिए गतिशील तर्कों को पास कर सकते हैं, उस स्थिति में आपको उन तर्कों को प्राप्त करने के लिए तर्कों का उपयोग करना होगा।

एक कामकाजी डेमो के लिए यहां जाएं - कोणीय फिल्टर के लिए कई तर्क पारित करना


0

आप बस उपयोग कर सकते हैं | filter:yourFunction:arg

<div ng-repeat="group in groups | filter:weDontLike:group">...</div>

और js में

$scope.weDontLike = function(group) {
//here your condition/criteria
return !!group 
}
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.