AngularJS - कैसे एक ngRepeat फ़िल्टर परिणाम परिणाम प्राप्त करने के लिए

Question

मैं एक एनजी-दोहराव निर्देश का उपयोग कर रहा हूं जैसे कि फिल्टर:

ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4"

और मैं प्रदान किए गए परिणामों को ठीक देख सकता हूं; अब मैं अपने नियंत्रक में उस परिणाम पर कुछ तर्क चलाना चाहता हूं। सवाल यह है कि मैं परिणाम आइटम संदर्भ कैसे ले सकता हूं?

अपडेट करें:

---

बस स्पष्ट करने के लिए: मैं एक ऑटो पूर्ण बनाने की कोशिश कर रहा हूं, मेरे पास यह इनपुट है:

<input id="queryInput" ng-model="query" type="text" size="30" placeholder="Enter query">

और फिर फ़िल्टर किए गए परिणाम:

<ul>
   <li  ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4">{{item.name}}</li>
</ul>

अब मैं परिणाम को नेविगेट करना चाहता हूं और किसी एक आइटम का चयन करना चाहता हूं।

Answer 1

अद्यतन : यहाँ पहले की तुलना में एक आसान तरीका है।

 <input ng-model="query">
 <div ng-repeat="item in (filteredItems = (items | orderBy:'order_prop' | filter:query | limitTo:4))">
   {{item}}
 </div>

तब $scope.filteredItemsसुलभ है।

Comments

उत्तर के लिए धन्यवाद, कृपया मेरा अपडेट देखें। आप इसे कैसे लागू करेंगे, ध्यान दें कि मुझे पूरी आइटम सूची init पर मिलती है

— श्लोमी श्वार्ट्ज

सुपर कूल, इसके लिए धन्यवाद। काश, यह

— श्लोमी श्वार्ट्ज जूल

इस दृष्टिकोण के साथ समस्या यह है कि यदि आप सौंपी गई संपत्ति को देखते हैं, तो आप $ डिजीटल (प्रति पुनरावृत्ति) स्पैमिंग समाप्त कर देंगे ... शायद इससे बचने का कोई रास्ता है?

— जुहो वेप्सलीनन

यदि मैं खोज ऑब्जेक्ट और कंसोल को देखता हूं। तो मुझे filteredItemsहमेशा डेटा एक फ़िल्टर बाद में मिलता है। यह सिर्फ बदले हुए फ़िल्टर का परिणाम नहीं है, बल्कि पिछले बदलाव का है। कोई विचार?

— ProblemsOfSumit

क्या कोई मुझे समझा सकता है, यह काम क्यों करता है? मैं समझ सकता हूं कि $ स्कोप से एक वेरिएबल, रिपीट स्कोप (स्कोप इनहेरिटेंस) में सुलभ है, लेकिन दूसरा तरीका है? कैसे? कुछ प्रलेखन की सराहना की है। धन्यवाद

— dalvarezmartinez1

Answer 2

यहां एंडी जोसलिन के समाधान का फ़िल्टर संस्करण है।

अपडेट: ब्रेकिंग चेंज। संस्करण के रूप में 1.3.0-beta.19 ( यह प्रतिबद्ध ) फ़िल्टर का कोई संदर्भ नहीं है और thisवैश्विक दायरे के लिए बाध्य होगा। आप या तो संदर्भ को एक तर्क के रूप में पारित कर सकते हैं या एनजीआरपेट , 1.3.0-beta.17 + में नए अलियासिंग सिंटैक्स का उपयोग कर सकते हैं ।

// pre 1.3.0-beta.19
yourModule.filter("as", function($parse) {
  return function(value, path) {
    return $parse(path).assign(this, value);
  };
});

// 1.3.0-beta.19+
yourModule.filter("as", function($parse) {
  return function(value, context, path) {
    return $parse(path).assign(context, value);
  };
});

फिर आपके विचार में

<!-- pre 1.3.0-beta.19 -->
<input ng-model="query">
<div ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4 | as:'filteredItems'">
 {{item}}
</div>

<!-- 1.3.0-beta.19+ -->
<input ng-model="query">
<div ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4 | as:this:'filteredItems'">
 {{item}}
</div>

<!-- 1.3.0-beta.17+ ngRepeat aliasing -->
<input ng-model="query">
<div ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4 as filteredItems">
 {{item}}
</div>

जिससे आपको एक्सेस मिले $scope.filteredItems।

Comments

धन्यवाद! क्या आप बता सकते हैं कि फ़िल्टर कोड कैसे काम करता है? मैं $ पार्स से परिचित नहीं हूं, और कोणीय डॉक्स ने मुझे यह समझने में मदद नहीं की कि आपका फ़िल्टर बिल्कुल कैसे काम करता है।

— मैग्ने

@Magne कोई समस्या नहीं! कृपया अपडेट देखें, क्योंकि यह आपको सड़क पर कुछ दर्द और पीड़ा से बचा सकता है। आपके प्रश्न का उत्तर देने के लिए, संक्षेप में, $parseकोणीय की अभिव्यक्ति संकलक है । उदाहरण के लिए, यह स्ट्रिंग को 'some.object.property' ले जाएगा और एक फ़ंक्शन लौटाएगा जो आपको निर्दिष्ट मार्ग के लिए दिए गए पथ पर या तो सेट करने या मान प्राप्त करने की अनुमति देता है। संदर्भ। मैं इसका उपयोग यहाँ $ स्कोप पर फ़िल्टर परिणामों को सेट करने के लिए कर रहा हूँ, विशेष रूप से। हम उम्मीद करते है कि यह आपके सवाल का जवाब दे देगा।

— केविनजमेस्सियस

Answer 3

कुछ इस तरह का प्रयास करें, एनजी-रिपीट के साथ समस्या यह है कि यह बच्चे की गुंजाइश बनाता है क्योंकि आप तक पहुंच नहीं सकते हैं

filteritems

नियंत्रक से

<li ng-repeat="doc in $parent.filteritems = (docs | filter:searchitems)" ></li>

Answer 4

अपडेट करें:

1.3.0 के बाद भी। यदि आप इसे नियंत्रक या माता-पिता के दायरे पर रखना चाहते हैं तो आप इसे सिंटैक्स के रूप में नहीं कर सकते । उदाहरण के लिए यदि मेरे पास निम्नलिखित कोड है:

<div>{{labelResults}}</div>
<li ng-repeat="label in (labels | filter:query | as labelResults)">
</div>

ऊपर काम नहीं करेगा । इसके चारों ओर जाने का रास्ता $ पैरेंट का उपयोग कर रहा है:

<li ng-repeat="label in ($parent.labelResults = (labels | filter:query))">

Comments

यह नोट करना अच्छा है कि यदि आपके पास इस पर एक लिमिटे ट फिल्टर है। यह $ पैरेंट में दिखाई नहीं देगा। लेलबसुइट्स

— ज़ैक

अगर मुझे console.log labelResultsहमेशा डेटा एक फ़िल्टर बाद में मिलता है। यह सिर्फ बदले हुए फ़िल्टर का परिणाम नहीं है, बल्कि पिछले बदलाव का है। क्या आपको यह समस्या नहीं थी?

— अन्ना

Answer 5

मैं एंडी के समाधान के कुछ बेहतर संस्करण के साथ आया। उनके समाधान में एनजी-रिपीट असाइनमेंट में एक अभिव्यक्ति को देखता है। प्रत्येक डाइजेस्ट लूप उस एक्सप्रेशन का मूल्यांकन करेगा और स्कोप वैरिएबल पर परिणाम देगा।

इस समाधान के साथ समस्या यह है कि यदि आप बच्चे के दायरे में हैं तो आप असाइनमेंट के मुद्दों में भाग सकते हैं। यही कारण है कि आपको एनजी-मॉडल में डॉट होना चाहिए ।

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

एक सरल उपाय यह है कि आप अपने कंट्रोलर को एक फ़ंक्शन पर एक घड़ी लगाएं, जो असाइनमेंट बनाता है:

$scope.$watch(function () {
    $scope.filteredItems = $scope.$eval("items | orderBy:'order_prop' | filter:query | limitTo:4");
});

इस फ़ंक्शन का मूल्यांकन प्रत्येक पाचन चक्र के दौरान किया जाएगा ताकि प्रदर्शन एंडी के समाधान के साथ तुलनीय हो। आप फ़ंक्शन में किसी भी संख्या में असाइनमेंट जोड़ सकते हैं ताकि दृश्य के बारे में बिखरने के बजाय उन सभी को एक स्थान पर रख सकें।

दृश्य में, आप सीधे फ़िल्टर की गई सूची का उपयोग करेंगे:

<ul>
    <li  ng-repeat="item in filteredItems">{{item.name}}</li>
</ul>

यहाँ एक बेला है जहाँ इसे अधिक जटिल परिदृश्य में दिखाया गया है।

Comments

सुपर साफ और संरचना को प्रदूषित नहीं करता है, अच्छा है!

— कुजीन

यह समाधान मेरे लिए एकदम सही है..मैं दोहराना के बजाय आयनिक के संग्रह दोहराने का उपयोग कर रहा था..इसलिए मेरे लिए स्वीकृत जवाब काम क्यों नहीं किया

— Lakshay

Answer 6

इस उत्तर की जाँच करें:

एनजी-रिपीट में आइटम्स का चयन और एक्सेस करना

<li ng-repeat="item in ..." ng-click="select_item(item)">