अगर यह अभिव्यक्ति से मेल खाता है तो कोणीय एनजी-रिपीट किसी आइटम को छोड़ दें


91

मैं मूल रूप से कोणीय दोहराने में किसी आइटम को छोड़ने के लिए कोणीय बताने के लिए एक रास्ता खोज रहा हूं अगर यह अभिव्यक्ति से मेल खाता है, मूल रूप से continue;

नियंत्रक में:

$scope.players = [{
    name_key:'FirstPerson', first_name:'First', last_name:'Person'
}, {
    name_key:'SecondPerson', first_name:'Second', last_name:'Person'
}]

अब अपने टेम्पलेट में मैं उन सभी को दिखाना चाहता हूं जो मेल नहीं खाते हैं name_key='FirstPerson'। मुझे लगा कि इसे फिल्टर करना है, इसलिए मैंने इसके साथ खेलने के लिए प्लंकर सेटअप किया, लेकिन इसमें कोई भाग्य नहीं था। प्लंकर प्रयास


मैं समझने की कोशिश करता हूं: क्या आप सभी वस्तुओं को दिखाना चाहते हैं लेकिन इंगित करते हैं कि कौन मैच करता है और कौन नहीं? या सिर्फ फ़िल्टर?
मैक्सिम शाओटिन

जवाबों:


144

जैसा कि @Maxim Shoustin ने सुझाव दिया, जो आप चाहते हैं उसे प्राप्त करने का सबसे अच्छा तरीका एक कस्टम फ़िल्टर का उपयोग करना होगा।
लेकिन अन्य तरीके भी हैं, उनमें से एक का उपयोग ng-ifउसी तत्व पर निर्देश का उपयोग करने के लिए किया जा रहा है जैसे कि आपने ng-repeatनिर्देश दिया है (यहां, प्लंकर भी ):

<ul>
    <li ng-repeat="player in players" ng-if="player.name_key!='FirstPerson'"></li>
</ul>

यह एक एस्थेटिक दृष्टिकोण से एक मामूली नुकसान पेश कर सकता है, लेकिन इसका एक बड़ा फायदा यह है कि आपका फ़िल्टरिंग एक ऐसे नियम पर आधारित हो सकता है जो playersसरणी के लिए तंग युग्मित नहीं है और जो आपके ऐप के दायरे में अन्य डेटा तक आसानी से पहुंच सकता है:

  <li 
      ng-repeat="player in players" 
      ng-if="app.loggedIn && player.name != user.name"
  ></li>

अद्यतन
जैसा कि कहा गया है, यह इस तरह की समस्या के समाधान में से एक है और आपकी आवश्यकताओं के अनुरूप हो भी सकता है और नहीं भी।
जैसा कि टिप्पणियों में बताया गया है, ng-ifएक निर्देश है, जिसका वास्तव में मतलब है कि यह पृष्ठभूमि में अधिक चीजें कर सकता है जितना आप उम्मीद कर सकते हैं।
उदाहरण के लिए, ng-if यह माता-पिता से एक नया क्षेत्र बनाता है :

एनजीआईएफ के भीतर बनाया गया दायरा प्रोटोटाइप पैतृक विरासत का उपयोग करके अपने मूल दायरे से विरासत में मिला है।

यह आमतौर पर सामान्य व्यवहार को प्रभावित नहीं करता है लेकिन अप्रत्याशित मामलों को रोकने के लिए, आपको इसे लागू करने से पहले ध्यान में रखना चाहिए।


यह वही था जो मैं ढूंढ रहा था, जानता था कि कस्टम फ़िल्टर के बिना इसे करने के लिए कुछ छोटा और मीठा तरीका होना चाहिए। धन्यवाद!
aron.duby

नोट: ng-if के कुछ स्कोप बिहेवियर हैं जो कि मुश्किल हो सकते हैं। मैंने इस तरीके को आजमाया और इससे कहीं और समस्या पैदा हुई। अर्थात्, मेरे पास एक "द्रष्टा" निर्देश है जो पुनरावर्तक समाप्त होने पर एक घटना प्रसारित करता है। एनजी-अगर इस पुनरावर्तक को जोड़ने के बाद यह अब उस घटना को निकाल नहीं दिया। एक कस्टम फ़िल्टर वास्तव में जाने का सबसे साफ तरीका हो सकता है।
क्लेविशिप

@claywhipkey आप सही हैं, सबसे साफ तरीका एक फिल्टर का उपयोग कर रहा है, लेकिन यह सभी मामलों के लिए उपयुक्त नहीं है। वैसे भी, टिप्पणी के लिए THX और आप देख सकते हैं कि मैं एक जोड़ दिया है ऊपर सिर सिर्फ मेकअप किसी को भी डेटा छानने के लिए एक निर्देश का उपयोग कर के निहितार्थ के बारे में पता करने के लिए जवाब में अद्यतन।
gion_13

43

मुझे पता है कि यह एक पुराना है, लेकिन अगर कोई व्यक्ति किसी अन्य संभावित समाधान की तलाश करेगा, तो इसे हल करने का एक और तरीका है - मानक फ़िल्टर का उपयोग करें :

ऑब्जेक्ट: एक पैटर्न ऑब्जेक्ट का उपयोग सरणी द्वारा निहित वस्तुओं पर विशिष्ट गुणों को फ़िल्टर करने के लिए किया जा सकता है। उदाहरण के लिए {name: "M", फ़ोन: "1"} विधेय उन मदों की एक सरणी लौटाएगा, जिनमें संपत्ति का नाम "M" और संपत्ति का फ़ोन "1" होगा। ... स्ट्रिंग के साथ उपसर्ग करके विधेय को नकारा जा सकता है! उदाहरण के लिए {name: "! M"} विधेय उन मदों की एक सरणी लौटाएगा, जिनमें संपत्ति का नाम "M" नहीं है।

तो टीएस उदाहरण के लिए कुछ इस तरह से करना चाहिए:

<ul>
    <li ng-repeat="player in players | filter: { name_key: '!FirstPerson' }"></li>
</ul>

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


इस बिंदु पर सरल। कोई कस्टम फ़िल्टर या नया स्कोप नहीं बनाया गया है जैसा कि लेखक ने कहा है। किसी सूची में एकल मान लंघन के लिए बिल्कुल सही।
mbokil

मुझे लगता है कि आपको 'खिलाड़ी' से 'खिलाड़ी' को छोड़ना होगा।'_के_ '- तो यह सिर्फ उपरोक्त उदाहरण में "{namekey:'! FirstPerson '}" होगा।
स्मिथ

मैं खाली कुंजी के साथ अच्छा खेलने के लिए कोणीय पाने में सक्षम नहीं था। क्या इसके बराबर में निर्मित फिल्टर का उपयोग करने के लिए किसी प्रकार की चाल है player in players | filter: { name_key: '' }? यह विशेष निर्देश केवल खिलाड़ियों को नहीं / खाली के साथ मेल नहीं खाएगा name_key। उलटा, name_key: '!'बिना खाली के किसी भी खिलाड़ी का चयन करने का इरादा name_keyभी काम नहीं करेगा।
एरिक एल।

आप इस उत्तर की जांच कर सकते हैं ।
इल्या लुज़ियानिन

4
खबरदार कि यह केवल सरणियों के साथ काम करता है, न कि किसी मामले में वस्तु गुणों के साथng-repeat="(key, val) in player"
डेविड डेज़

19

जब आप लागू करते हैं तो आप कस्टम फ़िल्टर का उपयोग कर सकते हैं ng-repeat। कुछ इस तरह:

 data-ng-repeat="player in players |  myfilter:search.name

myfilter.js:

app.filter('myfilter', function() {


   return function( items, name) {
    var filtered = [];

    angular.forEach(items, function(item) {

      if(name == undefined || name == ''){
        filtered.push(item);
        }

      /* only if you want start With*/
      // else if(item.name_key.substring(0, name.length) !== name){
      //   filtered.push(item);
      // }

      /* if you want contains*/
      // else if(item.name_key.indexOf(name) < 0 ){
      //   filtered.push(item);
      // }

       /* if you want match full name*/
       else if(item.name_key !== name ){
        filtered.push(item);
      }
    });

    return filtered;
  };
});

डेमो Plunker


इस काम के लिए धन्यवाद। यह निश्चित रूप से सही है, लेकिन मैंने कोड में @ gion_13 उत्तर की आसानी के साथ जाना समाप्त कर दिया है, इसलिए मुझे लगा कि मैंने स्वीकार किए गए उत्तर के रूप में उसका बेहतर अंकन किया है
aron.duby
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.