web-dev-qa-db-ja.com

入れ子になったng-repeat内に2つの$ index値を渡す

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

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

ここでPlunkerです http://plnkr.co/edit/bJUhI9oGEQIql9tahIJN?p=preview

angularjsangularjs-ng-repeat
310
Tules

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

だからあなたがする必要があるのは親の範囲に到達し、その$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>
452
Alex Osborn

$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

194
vucalur

この構文の使い方はどうでしょうか（この plunker を見てください）。私はちょうどこれを発見しました、そしてそれはかなり素晴らしいです。

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つのインデックスを区別することができます。

105
Okazari

ここに来た人を助けるために...本当に安全ではないので、あなたは$ 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

31
gonzalon

あなたがオブジェクトを扱っているとき、あなたはできるだけ簡単な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を探してください。

3
kwerle

ng-repeat="(sectionIndex, section) in sections"を使うだけ

そしてそれは次のレベルのng-repeatで使えるでしょう。

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