मैं एंगुलरजेएस के साथ एक सरणी कैसे फ़िल्टर कर सकता हूं और एनजी-मॉडल विशेषता के रूप में फ़िल्टर्ड ऑब्जेक्ट की संपत्ति का उपयोग कर सकता हूं?

122

यदि मेरे पास वस्तुओं की एक सरणी है, और मैं एक फिल्टर के आधार पर तत्वों में से एक की संपत्ति के लिए कोणीय मॉडल को बांधना चाहता हूं, तो मैं यह कैसे करूं? मैं एक ठोस उदाहरण के साथ बेहतर व्याख्या कर सकता हूं:

HTML:

<!DOCTYPE html>
<html ng-app>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
        <meta charset=utf-8 />
        <title>JS Bin</title>
    </head>
    <body ng-controller="MyCtrl">
        <input ng-model="results.year">
        <input ng-model="results.subjects.title | filter:{grade:'C'}">
    </body>
</html>

नियंत्रक:

function MyCtrl($scope) {
  $scope.results = {
    year:2013,
    subjects:[
      {title:'English',grade:'A'},
      {title:'Maths',grade:'A'},
      {title:'Science',grade:'B'},
      {title:'Geography',grade:'C'}
    ]
  };
}

JSBin: http://jsbin.com/adisax/1/edit

मैं ग्रेड 'सी' के साथ विषय के लिए दूसरा इनपुट फ़िल्टर करना चाहता हूं, लेकिन मैं मॉडल को ग्रेड से बांधना नहीं चाहता ; मैं इसे उस विषय के शीर्षक से बांधना चाहता हूं जिसमें ग्रेड 'सी' है।

क्या यह संभव है, और यदि ऐसा है, तो यह कैसे किया जाता है?

angularjs

— बर्नहार्ड हॉफमैन
स्रोत

127

<div ng-repeat="subject in results.subjects | filter:{grade:'C'}">
    <input ng-model="subject.title" />
</div>

— जेबी निज़ेट
स्रोत

1

मैं देखता हूं कि आप कहां जा रहे हैं, लेकिन मैं वास्तव में एक पुनरावर्तक नहीं चाहता था। मैं जिस संपत्ति को वास्तव में फ़िल्टर कर रहा हूँ वह एक पहचान स्तंभ है, इसलिए यह अद्वितीय है। लेकिन मैं देखता हूं कि यह सामान्य समस्या को हल करने का सही तरीका होगा।

— बर्नहार्ड हॉफमैन

1

यह इतालवी लोगों के लिए एक ट्यूटोरियल है। :) dev.stasbranger.com/post/77190983049/…

— सिल्वियो

10

यह बहुत मददगार था, और उलटा (सी के अलावा सब कुछ) के लिए, यह काम करेगा:filter:{grade:'!'+'C'}

— पुलकितसिंघल

2

क्या आप ऐसा कर सकते हैं grade array? मेरे मामले में मैं अपने ग्रेड एरे को ट्रीव्यू से बनाता हूं और चाहता हूं कि एरे में उन लोगों के लिए परिणाम को फ़िल्टर करें।

— जुआन कार्लोस ओरोपेज़ा

157

आप सभी "सी" ग्रेड प्राप्त करने के लिए अपने कंट्रोलर में "फिल्टर" फिल्टर का उपयोग कर सकते हैं। परिणाम सरणी का पहला तत्व प्राप्त करने से आपको ग्रेड "सी" वाले विषय का शीर्षक मिलेगा ।

$scope.gradeC = $filter('filter')($scope.results.subjects, {grade: 'C'})[0];

http://jsbin.com/ewitun/1/edit

सादे ES6 के साथ ही:

$scope.gradeC = $scope.results.subjects.filter((subject) => subject.grade === 'C')[0]

— ओलिवर
स्रोत

मुझे खेद है कि मैं उस दूसरे फिल्टर ('फिल्टर') का अनुसरण नहीं कर रहा हूं, क्या आप समझा सकते हैं कि थोड़ा और?

— विन्नमुक्का

1

@stevek यह फ़िल्टर का नाम है। फ़िल्टर () विधि आपको फ़िल्टर देती है। यह सिर्फ इतना है कि फ़िल्टर को फ़िल्टर कहा जाता है क्योंकि यह एक सरणी फ़िल्टर करता है। यह मुद्रा फ़िल्टर के साथ इस तरह दिखेगा: $ फ़िल्टर ('मुद्रा') (राशि, प्रतीक, अंशांकन

— ओलिवर

61

यहाँ एक संशोधित JSBin काम कर रहे नमूने के साथ है:

http://jsbin.com/sezamuja/1/edit

यहाँ मैं इनपुट में फिल्टर के साथ क्या किया है:

<input ng-model="(results.subjects | filter:{grade:'C'})[0].title">

— lukeatdesignworks
स्रोत

1

यह एक वास्तविक डील है। यह शक्ति है। यह रास्ता है। मैं इसके साथ गया और अब मैं खुश हूं।

— user1576978

13

कृपया ध्यान दें, यदि आप इस तरह $ फ़िल्टर का उपयोग करते हैं:

$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'});

और आप के लिए एक और ग्रेड हुआ, ओह आई डननो, सीसी या एसी या सी + या सीसीसी यह उन्हें अंदर खींचता है। आपको एक सटीक मैच के लिए आवश्यकता को जोड़ना होगा:

$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'}, true);

यह वास्तव में मुझे मार डाला जब मैं इस तरह से कुछ आयोग के विवरण में खींच रहा था:

var obj = this.$filter('filter')(this.CommissionTypes, { commission_type_id: 6}))[0];

केवल एक बग के लिए कॉल किया जाता है क्योंकि यह 6 के बजाय कमीशन आईडी 56 में खींच रहा था।

सच्ची ताकतों को एक सटीक मेल जोड़ना।

var obj = this.$filter('filter')(this.CommissionTypes, { commission_type_id: 6}, true))[0];

फिर भी, मैं इसे पसंद करता हूं (मैं टाइपस्क्रिप्ट का उपयोग करता हूं, इसलिए "लेट" और =>):

let obj = this.$filter('filter')(this.CommissionTypes, (item) =>{ 
             return item.commission_type_id === 6;
           })[0];

मैं ऐसा इसलिए करता हूं, क्योंकि सड़क के नीचे कुछ बिंदु पर, मैं उस फ़िल्टर किए गए डेटा आदि से कुछ और जानकारी प्राप्त करना चाहता हूं ... इस प्रकार का कार्य सही तरीके से होड को छोड़ देता है।

— डैनियल मॉरिस
स्रोत

आपके जैसी ही त्रुटि थी, तीसरे बूलियन पैरामीटर के साथ संकेत के लिए धन्यवाद। इसकी जानकारी नहीं थी।

— जॉर्ज लेबर

12

यदि आप नियंत्रक में परिणामों की एक अलग सूची बनाना चाहते हैं तो आप एक फ़िल्टर लागू कर सकते हैं

function MyCtrl($scope, filterFilter) {
  $scope.results = {
    year:2013,
    subjects:[
      {title:'English',grade:'A'},
      {title:'Maths',grade:'A'},
      {title:'Science',grade:'B'},
      {title:'Geography',grade:'C'}
    ]
  };
  //create a filtered array of results 
  //with grade 'C' or subjects that have been failed
  $scope.failedSubjects = filterFilter($scope.results.subjects, {'grade':'C'});
}

फिर आप विफल कर सकते हैं संदर्भ उसी तरह से जब आप परिणाम ऑब्जेक्ट को संदर्भित करेंगे

आप इसके बारे में यहाँ और अधिक पढ़ सकते हैं https://docs.angularjs.org/guide/filter

चूंकि इस उत्तर कोणीय ने प्रलेखन को अपडेट किया है, वे अब फिल्टर को कॉल करने की सलाह देते हैं

// update 
// eg: $filter('filter')(array, expression, comparator, anyPropertyKey);
// becomes
$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'});

— कीरन
स्रोत

फ़िल्टरफ़िल्टर क्या है? क्या यह कोई सेवा या निर्देश है? फ़िल्टर के लिए कोड कहाँ है?

— मऊ

यह एक कोणीय सेवा है। ऊपर दिए गए लिंक में पहले उदाहरण को देखें। (लिपियों में। js फ़ाइल)

— कीरान

हालाँकि उन्होंने दस्तावेज़ीकरण फ़िल्टर बदल दिया है। अभी भी काम करता है ..

— किरेन

4

आप कर सकते हैं भी उपयोग करें कार्यों के साथ $filter('filter'):

var foo = $filter('filter')($scope.results.subjects, function (item) {
  return item.grade !== 'A';
});

— Nelu
स्रोत

4

यदि आप ES6 का उपयोग कर रहे हैं तो आप कर सकते हैं:

var sample = [1, 2, 3]

var result = sample.filter(elem => elem !== 2)

/* output */
[1, 3]

यह भी ध्यान रखें कि फ़िल्टर मौजूदा सरणी को अपडेट नहीं करता है यह हर बार एक नया फ़िल्टर किया गया सरणी वापस करेगा।

— डिएगो वेन्जेशियो
स्रोत

0

HTML में एक से अधिक कॉलम के साथ एक ही फ़िल्टर लागू करना, बस उदाहरण:

 variable = (array | filter : {Lookup1Id : subject.Lookup1Id, Lookup2Id : subject.Lookup2Id} : true)

— अमय कुलकर्णी
स्रोत