नेस्टेड एनजी-रिपीट के भीतर 2 $ इंडेक्स वैल्यू पास करना

Question

तो मेरे पास एक एनजी-रिपीट नेस्ट है और नेक्स-मेन्यू बनाने के लिए एक और एनजी-रिपीट के भीतर नेस्टेड। <li>आंतरिक एनजी-रिपीट लूप में से प्रत्येक पर मैंने एक एनजी-क्लिक सेट किया है, जो ऐप को पता करने के लिए $ इंडेक्स में पास करके उस मेनू आइटम के लिए संबंधित नियंत्रक को कॉल करता है कि हमें किसकी ज़रूरत है। हालाँकि मुझे बाहरी एनजी-रिपीट से $ इंडेक्स में भी पास होने की जरूरत है ताकि ऐप को पता चल सके कि हम किस सेक्शन में हैं और किस ट्यूटोरियल में।

<ul ng-repeat="section in sections">
    <li  class="section_title {{section.active}}" >
        {{section.name}}
    </li>
    <ul>
        <li class="tutorial_title {{tutorial.active}}" ng-click="loadFromMenu($index)" ng-repeat="tutorial in section.tutorials">
            {{tutorial.name}}
        </li>
    </ul>
</ul>

यहां एक प्लंकर http://plnkr.co/edit/bJUhI9oGEQIql9tahIJN?p=preview

Comments

आप $ इंडेक्स क्यों पास करना चाहते हैं? बस इस तरह वस्तु संदर्भ पास करें ng-click="loadFromMenu(section)"। $ इंडेक्स पास करने का मतलब है कि आप उस ऑब्जेक्ट को खोजने के लिए एक लूप करेंगे जो अनावश्यक है।

— मोशी

Answer 1

प्रत्येक एनजी-रिपीट पास किए गए डेटा के साथ एक बच्चा गुंजाइश बनाता है, और $indexउस दायरे में एक अतिरिक्त चर भी जोड़ता है ।

तो आपको जो करने की ज़रूरत है वह मूल दायरे तक पहुँच जाता है, और इसका उपयोग करें $index।

Http://plnkr.co/edit/FvVhirpoOF8TYnIVygE6?p=preview देखें

<li class="tutorial_title {{tutorial.active}}" ng-click="loadFromMenu($parent.$index)" ng-repeat="tutorial in section.tutorials">
    {{tutorial.name}}
</li>

Comments

भयानक, इसलिए कि मैं बाहरी $ सूचकांक का उपयोग कैसे करता हूं, लेकिन मुझे BOTH $ सूचकांक मूल्यों को पारित करने की आवश्यकता है। मैंने उन्हें एक सरणी में डालने की कोशिश की और यह काम किया :)

— Tules

आपको एक सरणी का उपयोग करने की आवश्यकता नहीं है: ng-click="loadFromMenu($parent.$index, $index)"

— मार्क राजकॉक

आपको इंडेक्स को इन-लोडफ्रेममेनू में पास करने की आवश्यकता नहीं है, इसके पास इस ऑब्जेक्ट तक पहुंच होनी चाहिए, जो आपको इस तक पहुंच देगा: यह $ इंडेक्स और यह। $ पेरेंट। $ इंडेक्स

— ओडमैन

@Oddman भले ही यह संभव हो, मैं इसके बारे में एक अच्छा विचार नहीं करता हूं, क्योंकि आप एक भार के संदर्भ में चलने के लिए अपने भार को मुश्किल बनाते हैं। मान लीजिए कि आप उदाहरण के लिए मेनू के भीतर समूह बनाते हैं जो दो महत्वपूर्ण लोगों के बीच एक और गुंजाइश पैदा करते हैं - आपको कॉल को बदलने के बजाय लोडफ्रेममेनू को बदलना होगा। और अगर कुछ पुरुषों में आपको कॉल करने की आवश्यकता है loadFromMenu($parent.$parent.$index,$index)और कुछ में आपको बस जरूरत है loadFromMenu($parent.$index,$index)तो उपयोग this....करना बस काम नहीं करेगा।

— epeleg

आपको $ पेरेंट का उपयोग नहीं करना चाहिए। $ इंडेक्स वास्तव में सुरक्षित नहीं है। यदि आप लूप के अंदर एनजी-अगर जोड़ते हैं, तो आपको $ इंडेक्स गड़बड़ हो जाता है, चेक करें: plnkr.co/52oIhLfeXXI9ZAynTuAJ

— gonzalon

Answer 2

रास्ते $parent.$indexका उपयोग करने से अधिक सुंदर समाधान है ng-init:

<ul ng-repeat="section in sections" ng-init="sectionIndex = $index">
    <li  class="section_title {{section.active}}" >
        {{section.name}}
    </li>
    <ul>
        <li class="tutorial_title {{tutorial.active}}" ng-click="loadFromMenu(sectionIndex)" ng-repeat="tutorial in section.tutorials">
            {{tutorial.name}}
        </li>
    </ul>
</ul>

प्लंकर: http://plnkr.co/edit/knwGEnOsAWLhLieKVItS??==fo

Comments

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

— डेविड बिच

IMO यह उत्तर स्वीकृत की तुलना में बेहतर है। $ माता-पिता का उपयोग करना वास्तव में, वास्तव में अप्राप्य है।

— ओलिवरा 1

जब आप सूची से आइटम निकालते हैं तो यह काम करना बंद कर देता है क्योंकि एनजी-इनिट मूल्य फिर से शुरू नहीं होता है। यदि आप सूची से आइटम निकालने का इरादा नहीं रखते हैं तो यह केवल उपयोगी है।

— जेसी ग्रीथहाउस 18

लगता है कोणीय वाक्यविन्यास विकसित हुआ। stackoverflow.com/a/31477492/2516560 अब आप "एनजी-रिपीट = (कुंजी, मान) डेटा में" का उपयोग कर सकते हैं

— ओकाज़ारी

वापस दिनों में तब मैंने यह उत्तर लिखा था, यह इसे कोणीय 1.X के लिए करने का तरीका था। डॉक्स ng-initमें इस प्रयोग का प्रदर्शन ng-initडॉक्स में एक भी उल्लेख के साथ नहीं किया गया था ng-repeat, इसलिए मैंने यहां लिखा + जीथब पर डॉक्स में संशोधन किया। वर्तमान ng-repeatसिंटैक्स के पास इसे प्राप्त करने का एक बेहतर तरीका है, जो @Okazari द्वारा प्रदर्शित किया जाता है। यह टिप्पणियों में आपके द्वारा उल्लिखित कुछ खामियों से मुक्त है।

— 8

Answer 3

इस सिंटैक्स का उपयोग करने के बारे में क्या है (इस प्लंकर में एक नज़र डालें )। मैंने अभी इसकी खोज की है और यह बहुत बढ़िया है।

ng-repeat="(key,value) in data"

उदाहरण:

<div ng-repeat="(indexX,object) in data">
    <div ng-repeat="(indexY,value) in object">
       {{indexX}} - {{indexY}} - {{value}}
    </div>
</div>

इस सिंटैक्स के साथ आप अपना खुद का नाम दे सकते हैं $indexऔर दोनों इंडेक्स को अलग कर सकते हैं ।

Comments

मुझे लगता है कि माता-पिता का उपयोग करने की तुलना में यह बहुत साफ है जब आपके पास कई नेस्टेड छोरों हैं

— याशीथा चिन्तका

वास्तव में यह मुझे कुछ वास्तविक समस्याओं का कारण बना जब नोड्स को खींचने / छोड़ने के लिए कोणीय-यूआई-ट्री का उपयोग किया गया। अनुक्रमणिका को रीसेट करने के लिए प्रतीत नहीं होता है और इसके परिणामस्वरूप अजीब चीजें होती हैं।

— माइक टैवर्न

@MikeTaverne क्या आप एक प्लंकर में पुन: पेश करने की कोशिश कर सकते हैं? मुझे व्यवहार देखना अच्छा लगेगा।

— ओकाज़ारी

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

— एरिक मार्टिन

अच्छा! लेकिन कृपया प्लंकर उदाहरण की तरह "ट्रैक बाय" जोड़कर ठीक करें।

— डैनिलो

Answer 4

बस यहां पहुंचने वाले किसी व्यक्ति की मदद करने के लिए ... आपको $ माता-पिता का उपयोग नहीं करना चाहिए। $ सूचकांक, क्योंकि यह वास्तव में सुरक्षित नहीं है। यदि आप लूप के अंदर एनजी जोड़ते हैं, तो आपको $ सूचकांक गड़बड़ हो जाता है!

सही रास्ता

  <table>
    <tr ng-repeat="row in rows track by $index" ng-init="rowIndex = $index">
        <td ng-repeat="column in columns track by $index" ng-init="columnIndex = $index">

          <b ng-if="rowIndex == columnIndex">[{{rowIndex}} - {{columnIndex}}]</b>
          <small ng-if="rowIndex != columnIndex">[{{rowIndex}} - {{columnIndex}}]</small>

        </td>
    </tr>
  </table>

जाँच करें: plnkr.co/52oIhLfeXXI9ZAynTuAJ

Comments

ध्यान दें कि "ट्रैक बाय" की यहां आवश्यकता नहीं है - यह एक अलग चीज है जो एनजी-रिपीट के लिए उपयोग की जाती है, जो अद्वितीय वस्तुओं को समझने और संग्रह में बदलाव के लिए देखते हैं (डॉक्स के लिए "ट्रैकिंग और डुप्लिकेट" अनुभाग देखें: docs.angularjs.org / एपीआई / एनजी / निर्देश / एनजीपेट )। यहां महत्वपूर्ण बिंदु "एनजी-इनिट" है - यह सही तरीका है जिससे कोणीय डॉक्स सहमत हैं।

— रेबेका

@ आंगनज़ॉन इन इंडेक्स को एनजी क्लिक में कैसे पास करें

— नागराज एस

मैं रिमूवलिस्ट ($ इंडेक्स) या रिमिलिस्ट (rowIndex) कर रहा हूं। यह सूचकांक को सही ढंग से रिकॉर्ड नहीं कर रहा है क्योंकि मुझे सूचकांक मूल्य अपरिभाषित मिलता है। मैं कोणीय 1.5.6 का उपयोग कर रहा हूँ

— user269867

यह सही तरीका है, आपको कभी भी $ माता

— जेसु कास्टिलो

Answer 5

जब आप वस्तुओं के साथ काम कर रहे होते हैं, तो आप साधारण आईडी की उतनी ही अनदेखी करना चाहते हैं, जितनी सुविधाजनक।

यदि आप इस पर क्लिक लाइन बदलते हैं, तो मुझे लगता है कि आप अपने रास्ते पर अच्छी तरह से होंगे:

<li class="tutorial_title {{tutorial.active}}" ng-click="loadFromMenu(tutorial)" ng-repeat="tutorial in section.tutorials">

इसके अलावा, मुझे लगता है कि आपको बदलने की आवश्यकता हो सकती है

class="tutorial_title {{tutorial.active}}"

जैसा कुछ है

ng-class="tutorial_title {{tutorial.active}}"

Http://docs.angularjs.org/misc/faq देखें और एनजी-क्लास देखें।

Answer 6

महज प्रयोग करें ng-repeat="(sectionIndex, section) in sections"

और जो अगले स्तर के एनजी-रिपीट डाउन पर प्रयोग करने योग्य होगा।

<ul ng-repeat="(sectionIndex, section) in sections">
    <li  class="section_title {{section.active}}" >
        {{section.name}}
    </li>
    <ul>
        <li ng-repeat="tutorial in section.tutorials">
            {{tutorial.name}}, Your section index is {{sectionIndex}}
        </li>
    </ul>
</ul>