329

したがって、ナビゲーションメニューを作成するために、別のng-repeat内にng-repeatをネストします。内側のng-repeatループのそれぞれ<li>で、$ indexを渡してアプリに必要なコントローラーを通知することにより、そのメニュー項目に関連するコントローラーを呼び出すng-clickを設定します。ただし、外側のng-repeatから$ indexを渡す必要もあります。これにより、アプリは、どのセクションにいるのか、どのチュートリアルにいるのかを知ることができます。

<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

4

6 に答える 6

480

$index各ng-repeatは、渡されたデータを使用して子スコープを作成し、そのスコープに変数を追加します。

したがって、実行する必要があるのは、親スコープに到達し、それを使用すること$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>
于 2013-03-06T20:38:07.847 に答える
207

$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

于 2014-01-03T19:35:24.510 に答える
122

この構文を使用するのはどうですか（このプランカーを見てください）。私はこれを発見したばかりで、それはかなり素晴らしいです。

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と、2つのインデックスに独自の名前を付けて区別することができます。

于 2015-07-17T13:53:40.210 に答える
34

ここに来る人を助けるためだけに...$parent。$indexは本当に安全ではないので、使用しないでください。ng-ifをループ内に追加すると、$ indexが混乱します！

正しい方法

  <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

于 2015-07-12T22:23:22.307 に答える
4

使用するだけng-repeat="(sectionIndex, section) in sections"

そしてそれは次のレベルのng-repeatdownで使用できるようになります。

<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>
于 2019-06-02T12:41:00.353 に答える
3

オブジェクトを扱うときは、単純なIDをできるだけ無視する必要があります。

クリックラインをこれに変更すると、順調に進んでいると思います。

<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-classを探してください。

于 2013-03-06T20:38:33.453 に答える