vượt qua 2 giá trị chỉ mục trong vòng lặp ng lồng nhau

Vì vậy, tôi có một ng-repeat lồng nhau trong một ng-repeat khác để xây dựng một menu nav. Trên mỗi <li>vòng lặp lặp lại bên trong, tôi đặt ng-click để gọi bộ điều khiển có liên quan cho mục menu đó bằng cách chuyển vào chỉ mục $ để cho ứng dụng biết cái nào chúng ta cần. Tuy nhiên, tôi cũng cần phải vượt qua chỉ số $ từ lặp lại ng-ngoài để ứng dụng biết chúng ta đang ở phần nào cũng như hướng dẫn nào.

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

đây là một Plunker http://plnkr.co/edit/bJUhI9oGEQIql9tahIJN?p=preview

Mỗi ng-repeat tạo ra một phạm vi con với dữ liệu được truyền và cũng thêm một $indexbiến bổ sung trong phạm vi đó.

Vì vậy, những gì bạn cần làm là đạt đến phạm vi cha mẹ và sử dụng nó $index.

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

Cách giải quyết thanh lịch hơn $parent.$indexlà sử dụng 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

Điều gì về việc sử dụng cú pháp này (hãy xem trong plunker này ). Tôi mới phát hiện ra điều này và nó thật tuyệt vời.

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

Thí dụ:

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

Với cú pháp này, bạn có thể đặt tên riêng của mình $indexvà phân biệt hai chỉ mục.

Chỉ để giúp ai đó đến đây ... Bạn không nên sử dụng $ Parent. $ Index vì nó không thực sự an toàn. Nếu bạn thêm một ng-if bên trong vòng lặp, bạn sẽ nhận được chỉ số $ bị rối!

Đúng cách

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

Kiểm tra: plnkr.co/52oIhLfeXXI9ZAynTuAJ

Khi bạn đang làm việc với các đối tượng, bạn muốn bỏ qua id đơn giản càng nhiều càng thuận tiện.

Nếu bạn thay đổi dòng nhấp chuột vào đây, tôi nghĩ bạn sẽ ổn trên con đường của mình:

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

Ngoài ra, tôi nghĩ rằng bạn có thể cần phải thay đổi

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

đến một cái gì đó như

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

Xem http://docs.angularjs.org/misc/faq và tìm ng-class.

Chỉ dùng ng-repeat="(sectionIndex, section) in sections"

và điều đó sẽ được sử dụng ở cấp độ tiếp theo ng-lặp xuống.

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