web-dev-qa-db-ja.com

AngularJSで「ng-repeat」アイテムのインデックス（カウンター）を取得しますか？

AngularJSとそのng-repeatディレクティブを使用して、一連の質問を表示しています。 1で始まる各質問に番号を付ける必要があります。 ng-repeatを使用してこのようなカウンターを表示およびインクリメントするにはどうすればよいですか？ここに私がこれまでに持っているものがあります：

<ul>
    <li ng-repeat="question in questions | filter: {questionTypesId: questionType, selected: true}">
        <div>
            <span class="name">
                {{ question.questionText }}
            </span>
        </div>
        <ul>
            <li ng-repeat="answer in question.answers">
                <span class="name">
                    {{answer.selector}}. {{ answer.answerText }}
                </span>
            </li>
        </ul>
    </li>
</ul>
javascriptangularjsindexingcounter
37
lascoff

Angularjsのドキュメントには多くの例があります。少し時間をかけて探索するだけです。

こちらの例をご覧ください。 ngRepeat example 、同じケースです。

<ul>
    <li ng-repeat="question in questions | filter: {questionTypesId: questionType, selected: true}">
        <div>
            <span class="name">
                {{$index + 1}} {{ question.questionText }}
            </span>
        </div>
        <ul>
            <li ng-repeat="answer in question.answers">
                <span class="name">
                    {{answer.selector}}. {{ answer.answerText }}
                </span>
            </li>
        </ul>
    </li>
</ul>
49
أنيس بوهاشم

同様のものを検索して、ここに到達しました。

ここに私のために働いたものがあります。

{{$index + 1}}

インデックスは0から始まるため、+ 1が追加されます。

37
Yasser

Ng-repeatで指定された配列のインデックスを取得するには2つの方法があります

$ indexを使用する

<th ng-repeat="n in [].constructor(3 + 1) track by $index">{{$index}}</th>

カウンターを使用する

この方法は、ng-repeatをネストしていて、両方のループにカウンターが必要な場合に便利です。次の例ではカウンター行を使用しています。 $ indexによる追跡は必須ですが、ロジックには使用されません。

<tr ng-repeat="(row, y) in getNumber(h.seats.length, 3) track by $index">
                    <td>{{row+1}}</td>

どちらの場合も、カウンターは0から始まり、必要に応じて+1を使用してオフセットできます

4
Sacky San