melewati 2 $ nilai indeks dalam nested ng-repeat

Jadi saya punya ng-repeat yang bersarang di ng-repeat lain untuk membangun menu nav. Pada masing-masing <li>di loop berulang ng-dalam saya menetapkan ng-klik yang memanggil controller yang relevan untuk item menu dengan melewati indeks $ untuk membiarkan aplikasi tahu mana yang kita butuhkan. Namun saya juga harus lulus dalam indeks $ dari luar ng-repeat sehingga aplikasi tahu bagian mana kita dan tutorial yang mana.

<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>

inilah Plunker http://plnkr.co/edit/bJUhI9oGEQIql9tahIJN?p=preview

Setiap ng-repeat membuat lingkup anak dengan data yang dikirimkan, dan juga menambahkan $indexvariabel tambahan dalam lingkup itu.

Jadi yang perlu Anda lakukan adalah menjangkau hingga lingkup induk, dan menggunakannya $index.

Lihat 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>

Solusi yang jauh lebih elegan daripada $parent.$indexmenggunakan 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>

Plunker: http://plnkr.co/edit/knwGEnOsAWLhLieKVItS?p=info

Bagaimana dengan menggunakan sintaks ini (lihat di plunker ini ). Saya baru saja menemukan ini dan itu sangat mengagumkan.

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

Contoh:

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

Dengan sintaks ini Anda dapat memberikan nama Anda sendiri $indexdan membedakan dua indeks.

Hanya untuk membantu seseorang yang datang ke sini ... Anda tidak boleh menggunakan $ parent. $ Index karena itu tidak benar-benar aman. Jika Anda menambahkan ng-jika di dalam loop, Anda mendapatkan $ index berantakan!

Cara yang benar

  <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>

Periksa: plnkr.co/52oIhLfeXXI9ZAynTuAJ

Ketika Anda berhadapan dengan objek, Anda ingin mengabaikan id sederhana sebanyak yang nyaman.

Jika Anda mengubah baris klik ke ini, saya pikir Anda akan berada di jalan:

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

Juga, saya pikir Anda mungkin perlu berubah

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

untuk sesuatu seperti

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

Lihat http://docs.angularjs.org/misc/faq dan cari ng-class.

Gunakan saja ng-repeat="(sectionIndex, section) in sections"

dan itu akan bisa digunakan pada level selanjutnya ng-repeat down.

<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>