web-dev-qa-db-fra.com

Obtenir l'index (compteur) d'un élément 'ng-repeat' avec AngularJS?

J'utilise AngularJS et ses ng-repeat directive pour afficher une séquence de questions. Je dois numéroter chaque question en commençant par 1. Comment afficher et incrémenter un tel compteur avec ng-repeat? Voici ce que j'ai jusqu'à présent:

<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

La documentation d'Angularjs regorge d'exemples, il vous suffit de prendre le temps de l'explorer.

Voir cet exemple ici: exemple ngRepeat , c'est le même cas.

<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
أنيس بوهاشم

Atteint ici en recherchant quelque chose de similaire.

Voici ce qui a fonctionné pour moi.

{{$index + 1}}

+1 est ajouté car l'index commence à 0.

37
Yasser

Il y a deux façons d'obtenir un index pour le tableau donné dans ng-repeat

Utilisation de $ index

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

Utiliser un compteur

Cette méthode est utile lorsque vous avez imbriqué ng-repeat et que vous avez besoin de compteurs pour les deux boucles ... L'exemple suivant utilise la ligne de compteur. Bien que le suivi par $ index soit requis, il n’est pas utilisé pour la logique.

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

Dans les deux cas, le compteur commence par 0 et vous pouvez utiliser +1 si vous le souhaitez.

4
Sacky San