yuvalanmış ng tekrarında 2 $ endeks değeri geçirme

Bu yüzden bir nav menüsü oluşturmak için başka bir ng tekrar içinde yuvalanmış bir ng-tekrar var. <li>İç ng-tekrar döngüsünün her birinde , uygulamanın hangisine ihtiyacımız olduğunu bildirmek için $ dizinini ileterek bu menü öğesi için ilgili denetleyiciyi çağıran bir ng-click ayarladım. Ancak ben de uygulama hangi bölümde olduğu gibi hangi öğretici bilir böylece dış ng-tekrardan $ endeksi geçmek gerekir.

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

İşte bir Plunker http://plnkr.co/edit/bJUhI9oGEQIql9tahIJN?p=preview

Her ng tekrarı, iletilen verilerle bir alt kapsam oluşturur ve $indexbu kapsamda ek bir değişken ekler .

Yapmanız gereken şey ana kapsama ulaşmak ve bunu kullanmaktır $index.

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

$parent.$indexKullanmaktan çok daha şık bir çözüm 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>

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

Bu sözdizimini kullanmaya ne dersiniz (bu dalma makinesine bir göz atın ). Ben sadece bunu keşfettim ve oldukça harika.

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

Misal:

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

Bu sözdizimi ile $indexiki dizine kendi adınızı verebilir ve ayırt edebilirsiniz.

Sadece buraya gelen birine yardım etmek için ... Gerçekten güvenli olmadığı için $ parent. $ Dizinini kullanmamalısınız. Döngünün içine bir ng-if eklerseniz, $ endeksi dağınık hale gelir!

Doğru yol

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

Kontrol: plnkr.co/52oIhLfeXXI9ZAynTuAJ

Nesnelerle uğraşırken, basit kimlikleri de uygun olduğu kadar yoksaymak istersiniz.

Tıklama satırını bu şekilde değiştirirseniz, yolunuza çıkacağınızı düşünüyorum:

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

Ayrıca, bence değiştirmeniz gerekebilir

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

gibi bir şeye

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

Bkz. Http://docs.angularjs.org/misc/faq ve ng-sınıfı olup olmadığına bakın.

Sadece kullan ng-repeat="(sectionIndex, section) in sections"

ve bu, bir sonraki seviyeden sonra tekrarlanabilir.

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