নেস্টেড এনজি-রিপিটের মধ্যে 2 $ সূচক মানগুলি পাস করা

Question

সুতরাং একটি এনভি-মেনু তৈরির জন্য আমার কাছে অন্য এনজি-রিপিটের অভ্যন্তরে একটি এনজি-রিপিট থাকে। প্রতিটি <li>ভেতরের NG-পুনরাবৃত্তি লুপ উপর আমি একটি NG-ক্লিক যা $ সূচক ক্ষণস্থায়ী যাক অ্যাপ্লিকেশন জানা যা এক আমরা প্রয়োজন যে মেনু আইটেম জন্য প্রাসঙ্গিক নিয়ামক আহ্বান করে। তবে আমাকে বাইরের এনজি-রিপিট থেকে $ সূচকটিও পাস করতে হবে যাতে অ্যাপটি জানে যে আমরা কোন বিভাগে রয়েছি পাশাপাশি কোন টিউটোরিয়ালটি করেছি।

<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= পূর্বরূপ দেখুন

Comments

আপনি কেন $ সূচক পাস করতে চান? ঠিক যেমন অবজেক্ট রেফারেন্স পাস ng-click="loadFromMenu(section)"। $ সূচক পাস করার অর্থ আপনি অপ্রয়োজনীয় যে বিষয়টিকে সন্ধান করতে একটি লুপ করবেন।

— মোশি 18

Answer 1

প্রতিটি এনজি-রিপিট পাস হওয়া ডেটা সহ একটি শিশু সুযোগ তৈরি করে $indexএবং সেই সুযোগে একটি অতিরিক্ত ভেরিয়েবল যুক্ত করে।

সুতরাং আপনার যা করা দরকার তা হ'ল পিতামাতার স্কোপে পৌঁছানো এবং এটি ব্যবহার করুন $index।

Http://plnkr.co/edit/FvVhirpoOF8TYnIVygE6?p= পূর্বরূপ দেখুন

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

Comments

দুর্দান্ত, তাই আমি কীভাবে বাইরের $ সূচকটি অ্যাক্সেস করি তবে আমার দুটি $ সূচক মানগুলি পাস করতে হবে। আমি তাদের একটি অ্যারে রাখার চেষ্টা করেছি এবং এটি কার্যকর হয়েছে :)

— টিউস

আপনাকে কোনও অ্যারে ব্যবহার করতে হবে না: ng-click="loadFromMenu($parent.$index, $index)"

— রাজকক

এমনকি আপনাকে লোডফর্মমেনুতেও সূচিগুলি পাস করতে হবে না, এটিতে এই কোনও অবজেক্টে অ্যাক্সেস থাকা উচিত, এটি আপনাকে প্রবেশাধিকার দেবে: এটি $ সূচক এবং এটি $ পিতামাতা $ সূচক

— অডডম্যান

@ অড্ডম্যান যদিও এটি সম্ভব তবে আমি এটির একটি ভাল ধারণা বলে মনে করি না কারণ আপনি তখন কোনও ভার্সন wire সূচক সহ একটি স্ক্র্যাপ এবং parent সূচক সহ একটি প্যারেন্ট স্কোপ রয়েছে এমন কোনও প্রসঙ্গে প্রাসঙ্গিকভাবে চালনার জন্য আপনার লোডফর্মমেনুকে শক্ত করুন। ধরুন আপনি উদাহরণস্বরূপ মেনুতে এমন দুটি গ্রুপ তৈরি করুন যা দুটি উল্লেখযোগ্যগুলির মধ্যে অন্য একটি সুযোগ তৈরি করে - আপনাকে কলটি পরিবর্তনের পরিবর্তে লোডফ্রোমেনু পরিবর্তন করতে হবে। এবং যদি কিছু মেন্যুতে আপনাকে কল করতে হবে loadFromMenu($parent.$parent.$index,$index)এবং কিছুতে আপনার প্রয়োজন ঠিক loadFromMenu($parent.$index,$index)তখন ব্যবহার করা this....ঠিক কাজ করবে না।

— epeleg

এটি safe পিতামাতা $ সূচকটি ব্যবহার করা উচিত নয় কারণ এটি সত্যই নিরাপদ নয়। আপনি যদি লুপটির

— সূচকটি গোলমেলে

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?p=info

Comments

এটি এই প্রভাবটি অর্জনের প্রস্তাবিত পদ্ধতি। প্রকৃতপক্ষে কৌণিক দল কয়েকবার প্রকাশ করেছে যে এটি এনজি-ডিরেক্ট নির্দেশের কয়েকটি প্রস্তাবিত ব্যবহারের মধ্যে একটি (দেখুন: লিঙ্ক )। আমি প্রায়শই $ পিতামাতার ব্যবহার (বর্তমানে গৃহীত উত্তর অনুযায়ী) একটি কোড গন্ধ হিসাবে কিছুটা খুঁজে পাওয়া যায় কারণ সাধারণত স্কোপ যোগাযোগের (পরিসেবা বা সম্প্রচার / নির্গমন ইভেন্টগুলি) আরও ভালভাবে অর্জন করার একটি ভাল উপায় রয়েছে এবং নাম পরিবর্তনশীল এটি মান কি উপস্থাপন করে তা পরিষ্কার হয়ে যায়।

— ডেভিড বিচ

আইএমও এই উত্তর গ্রহণযোগ্য চেয়ে ভাল। $ পিতামাতার ব্যবহার সত্যিই অযৌক্তিক is

— অলিভার 1

আপনি তালিকা থেকে আইটেমগুলি সরিয়ে ফেললে এটি কাজ করা বন্ধ করে দেয় কারণ এনজি-আরিন মান পুনরায় আরম্ভ হয় না। আপনি কেবল তালিকা থেকে আইটেমগুলি সরিয়ে নেওয়ার পরিকল্পনা না করলেই এটি কার্যকর।

— জেসি গ্রেটহাউস

দেখে মনে হচ্ছে কৌণিক বাক্য গঠনটি বিবর্তিত হয়েছে। stackoverflow.com/a/31477492/2516560 আপনি এখন "এনজি-রিপিট = (কী, মান) ডেটাতে" ব্যবহার করতে পারেন)

— ওকাজারী

কিছু দিন আগে আমি এই উত্তরটি লিখেছিলাম, এটি Angular 1.X এর পক্ষে করার উপায় ছিল। এই ব্যবহারটি ডক্সে ng-initপ্রদর্শিত হয়েছিল যা ng-initডক্সে কোনও উল্লেখ নেই ng-repeat, তাই আমি এখানে ++ লিখেছি গিথুবটিতে ডক্স সংশোধন করে। বর্তমান ng-repeatসিনট্যাক্সের এটি অর্জনের আরও ভাল উপায় রয়েছে, যা @ ওকাজারী দ্বারা প্রদর্শিত হয়। মন্তব্যগুলিতে আপনি উল্লিখিত কিছু অসম্পূর্ণতা থেকে মুক্ত।

— vucalur

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

আমি মনে করি আপনি যখন একাধিক নেস্ট লুপগুলি ব্যবহার করেন তখন পিতা-মাতার ব্যবহারের চেয়ে এটি আরও পরিচ্ছন্ন

— ইয়াসিথা চিন্তাকা

কৌণিক-ইউআই-ট্রি ব্যবহার করে নোডগুলি টেনে / ড্রপ করতে আসলে এটি আমাকে কিছু বাস্তব সমস্যা তৈরি করেছিল। সূচকটি পুনরায় সেট হয়ে গেছে বলে মনে হচ্ছে না এবং ফলস্বরূপ অদ্ভুত কিছু ঘটে।

— মাইক Taverne

@ মাইকটাইভার্ন আপনি কি কোনও নিমজ্জনকারীকে পুনরুত্পাদন করার চেষ্টা করতে পারেন? আমি আচরণটি দেখতে পছন্দ করি।

— ওকাজারী

এটি সম্পন্ন করার এবং কোনও সম্ভাব্য সমস্যা এড়ানোর সঠিক উপায়। এনজি-আরআই প্রাথমিক রেন্ডারটির জন্য কাজ করে, তবে যদি পৃষ্ঠাটিতে অবজেক্টটি আপডেট করা হয় তবে এটি ভেঙে যায়।

— এরিক মার্টিন

ভাল! তবে দয়া করে প্লাঙ্কারের উদাহরণের মতো "ট্র্যাক বাই" যুক্ত করে ঠিক করুন।

— ডানিলো

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

নোট করুন যে এখানে "ট্র্যাক বাই" দরকার নেই - এটি অনন্য আইটেমগুলি বুঝতে এবং সংগ্রহের পরিবর্তনগুলি দেখার জন্য এনজি-পুনরাবৃত্তির জন্য ব্যবহৃত একটি পৃথক জিনিস (ডক্সের "ট্র্যাকিং এবং ডুপ্লিকেটস" বিভাগটি দেখুন: ডকস.আঙ্গুলারজেএসআর / এপিআই / এনজি / ডাইরেক্টিভ / এনজিপিপি )। এখানে গুরুত্বপূর্ণ পয়েন্টটি হ'ল "এনজি-থিম" - এটি কৌণিক ডক্সের সাথে একমত হওয়ার সঠিক উপায়।

— রেবেকা

@ অ্যাজোনজালন কীভাবে এই সূচকে এনজি ক্লিকে প্যারামিটার হিসাবে পাস করবেন

— নাগরাজ এস

আমি মুছে ফেলা তালিকা ($ সূচক) বা অপসারণলিস্ট (রাউইউন্ডেক্স) এটি সূচকটি সঠিকভাবে রেকর্ড করছে না ফাংশনে আমি সূচিটি মূল্য নির্ধারিত হিসাবে প্রাপ্ত করি। আমি কৌনিক 1.5.6

— ব্যবহারকারী 269867

এটি সঠিক উপায়, আপনার কখনই $ পিতা

— মাতাকে

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 এবং NG-বর্গ জন্য দেখুন।

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>