1. ホーム
  2. JavaScript

angularJSの深いネストしたngRepeatで異なるレベルの$indexを取得する方法

2022-02-18 20:05:57

参考記事

Angularでハックする。深くネストしたngRepeatで異なるレベルの$indexを取得する方法

<div class="btn-group" ng-repeat="type in types" ng-init="outerIndex = $index">
    <button type="button" class="btn btn-default">{
{type.name}}</button>
    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup=" true" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
        <li>
            <a href="#" ng-repeat="status in statuses" ng-click="doSomething(outerIndex,$index)">{
{status.name}}</a>
        </li>
    </ul>
</div>

ポイントは、最初のループ、最初のng-repeatの後にng-initを使用して、外側の$indexの値を格納する変数(outerIndex)を定義し、内側のループで、$indexを使って内側のループの$indexにアクセスしつつ、この変数(outerIndex)を使用できるようにすることである。