AngularJs में एनजी-रिपीट के साथ फ़िल्टर (की, वैल्यू) कैसे करें?

Question

मैं ऐसा कुछ करने की कोशिश कर रहा हूं:

<div ng-controller="TestCtrl">
    <div ng-repeat="(k,v) in items | filter:hasSecurityId">
        {{k}} {{v.pos}}
    </div>
</div>

AngularJs भाग:

function TestCtrl($scope) 
{
    $scope.items = {
                     'A2F0C7':{'secId':'12345', 'pos':'a20'},
                     'C8B3D1':{'pos':'b10'}
                   };

    $scope.hasSecurityId = function(k,v)
    {
       return v.hasOwnProperty('secId');
    }
}

लेकिन किसी तरह, यह मुझे सभी आइटम दिखा रहा है। मैं (कुंजी, मूल्य) पर कैसे फ़िल्टर कर सकता हूं?

Comments

कृपया कुछ उदाहरण डेटा फ़ॉट आइटम प्रदान करें। या हमें एक बेला दे;)

— रॉबिन ड्रेक्सलर

यह नहीं है कि आप दस्तावेज़ों को फ़िल्टर कैसे बनाते हैं , और जैसा कि रॉबिन ने कहा, कृपया एक उदाहरण।

— याह्या KEMEM

मैंने पहले ही एक पूर्ण उदाहरण दिया था और मुझे पता है कि फिल्टर का उपयोग कैसे करना है। मैं बस "कुंजी (मान) के साथ फ़िल्टर का उपयोग कैसे करें" पूछ रहा हूं।

— वुरल

इंडेक्स और काउंट उस दायरे में उपलब्ध होना चाहिए

— Shanimal

Answer 1

कोणीय फिल्टर केवल कोणीय के लिए लागू किया जा सकता है और वस्तुओं से नहीं, कोणीय के एपीआई से -

"सरणी से आइटम का एक सबसेट चुनता है और इसे नए सरणी के रूप में लौटाता है।"

आपके पास यहां दो विकल्प हैं:
1) $scope.itemsकिसी ऐरे में जाएं या -
2) ng-repeatआइटम को इस तरह से प्री-फिल्टर करें:

<div ng-repeat="(k,v) in filterSecId(items)">
    {{k}} {{v.pos}}
</div>

और नियंत्रक पर:

$scope.filterSecId = function(items) {
    var result = {};
    angular.forEach(items, function(value, key) {
        if (!value.hasOwnProperty('secId')) {
            result[key] = value;
        }
    });
    return result;
}

jsfiddle : http://jsfiddle.net/bmleite/WA2BE/

Comments

अनंत (पचने) छोरों से बचने के लिए इस दृष्टिकोण से सावधान रहने की आवश्यकता है। 6054 और 705 देखें । नैरेट द्वारा सारांश : संक्षेप में, एनजी-रिपीट में संग्रह को वापस करने के लिए फ़ंक्शन का उपयोग करना एक विरोधी पैटर्न है। संग्रह को एक स्कोप गुण में असाइन करना बेहतर है, और उस पर लूप।

— 23

उपयोगी टिप्पणी। यह मुझे एक पाश के लिए फेंक रहा था; मैं किसी भी पुनरावृत्ति को छानने में सक्षम होने की उम्मीद करता हूं । बहुत धन्यवाद। :)

— क्रिस क्रिचो

नोट: यह अब एक पूर्ण विरोधी पैटर्न है। कोणीय 1.3 में अब स्टेटलेस फिल्टर होते हैं ( जैसे किghgh.io/lessons/… ) इसलिए आप निश्चित रूप से इसके लिए एक फ़िल्टर बनाना चाहते हैं।

— kentcdodds

@kentcdodds लिंक पोस्ट नहीं करते हैं जो मुफ़्त नहीं हैं!

— सेबस्टियन

दोहराए गए तत्व पर सिर्फ एनजी-अगर क्यों नहीं जोड़ते हैं?

— कार्बनड्री

Answer 2

मेरा समाधान कस्टम फ़िल्टर बनाना और उसका उपयोग करना होगा:

app.filter('with', function() {
  return function(items, field) {
        var result = {};
        angular.forEach(items, function(value, key) {
            if (!value.hasOwnProperty(field)) {
                result[key] = value;
            }
        });
        return result;
    };
});

और HTML में:

 <div ng-repeat="(k,v) in items | with:'secId'">
        {{k}} {{v.pos}}
 </div>

Comments

हालाँकि, यह n * n बार लूप करेगा।

— मैक्सिसम

Answer 3

इसके अलावा, आप के ng-repeatसाथ उपयोग कर सकते हैं ng-if:

<div ng-repeat="(key, value) in order" ng-if="value > 0">

Comments

चतुर। इससे काफी समय की बचत हुई।

— सफ़वान

Answer 4

या बस उपयोग करें

ng-show="v.hasOwnProperty('secId')"

अद्यतन समाधान यहाँ देखें:

http://jsfiddle.net/RFontana/WA2BE/93/

Comments

धन्यवाद .. मैंने इसका इस्तेमाल किया लेकिन ng-ifइसके बजाय

— Zim

Answer 5

आप बस कोणीय.फिल्टर मॉड्यूल का उपयोग कर सकते हैं , और फिर आप नेस्टेड गुणों द्वारा भी फ़िल्टर कर सकते हैं।
देखें: jsbin
2 उदाहरण:

जे एस:

angular.module('app', ['angular.filter'])
  .controller('MainCtrl', function($scope) {
  //your example data
  $scope.items = { 
    'A2F0C7':{ secId:'12345', pos:'a20' },
    'C8B3D1':{ pos:'b10' }
  };
  //more advantage example
  $scope.nestedItems = { 
    'A2F0C7':{
      details: { secId:'12345', pos:'a20' }
    },
    'C8B3D1':{
      details: { pos:'a20' }
    },
    'F5B3R1': { secId:'12345', pos:'a20' }
  };
});

HTML:

  <b>Example1:</b>
  <p ng-repeat="item in items | toArray: true | pick: 'secId'">
    {{ item.$key }}, {{ item }}
  </p>

  <b>Example2:</b>
  <p ng-repeat="item in nestedItems | toArray: true | pick: 'secId || details.secId' ">
    {{ item.$key }}, {{ item }}
  </p> 

Comments

आपको यह बताना चाहिए कि angular.filterकोर कोणीय मॉड्यूल नहीं है और आप इसके लेखक हैं।

— डेविक्स

ऐसा लगता है कि toArrayफ़िल्टर अब मौजूद नहीं है। क्या कोई प्रतिस्थापन है, क्योंकि filterफ़िल्टर अभी भी वस्तुओं की अनुमति नहीं देता है?

— trysis

Answer 6

यह देर से ही सही, लेकिन मैंने ई के समान फिल्टर की तलाश की और कुछ इस तरह से उपयोग किया:

<div ng-controller="TestCtrl">
 <div ng-repeat="(k,v) in items | filter:{secId: '!!'}">
   {{k}} {{v.pos}}
 </div>
</div>

Comments

आपको यह काम करने के लिए कैसे मिला? जब मैं एक एनजी-दोहराया ऑब्जेक्ट के साथ एक फिल्टर का उपयोग करता हूं, तो मुझे एक त्रुटि मिलती है जो कि कोणीय दस्तावेज पर अपेक्षित आधार है।

— रात

Answer 7

यद्यपि यह प्रश्न पुराना है, फिर भी मैं कोणीय 1 डेवलपर्स के लिए अपना समाधान साझा करना चाहूंगा। बिंदु केवल मूल कोणीय फिल्टर का पुन: उपयोग करना है, लेकिन किसी भी ऑब्जेक्ट को एक सरणी के रूप में पारदर्शी रूप से पास करना है।

app.filter('objectFilter', function ($filter) {
    return function (items, searchToken) {
        // use the original input
        var subject = items;

        if (typeof(items) == 'object' && !Array.isArray(items)) {
            // or use a wrapper array, if we have an object
            subject = [];

            for (var i in items) {
                subject.push(items[i]);
            }
        }

        // finally, apply the original angular filter
        return $filter('filter')(subject, searchToken);
    }
});

इसे इस तरह उपयोग करें:

<div>
    <input ng-model="search" />
</div>
<div ng-repeat="item in test | objectFilter : search">
    {{item | json}}
</div>

यहाँ एक प्लंकर है

Answer 8

मैंने एक जेनेरिक फ़िल्टर का थोड़ा और उपयोग किया है जिसका उपयोग मैंने पहले से ही कई परियोजनाओं में किया है:

• ऑब्जेक्ट = वह वस्तु जिसे फ़िल्टर करने की आवश्यकता होती है
• फ़ील्ड = उस ऑब्जेक्ट के भीतर का फ़ील्ड जिसे हम फ़िल्टर करेंगे
• फ़िल्टर = फ़िल्टर का मूल्य जो फ़ील्ड से मेल खाना चाहिए

HTML:

<input ng-model="customerNameFilter" />
<div ng-repeat="(key, value) in filter(customers, 'customerName', customerNameFilter" >
   <p>Number: {{value.customerNo}}</p>
   <p>Name: {{value.customerName}}</p>
</div>

जे एस:

  $scope.filter = function(object, field, filter) {
    if (!object) return {};
    if (!filter) return object;

    var filteredObject = {};
    Object.keys(object).forEach(function(key) {
      if (object[key][field] === filter) {
        filteredObject[key] = object[key];
      }
    });

    return filteredObject;
  };