CODEWITHSUNDEEP
angularjsindexingangularjs-ng-repeat
Stéphane GRILLON
Stéphane GRILLON

Reputation: 11884

I want display one index in nested ng-repeat

I want write:

text text

1 my question true

2 my question true

text text

3 my question true

4 my question true

5 my question true

text text

6 my question true

7 my question true

<span ng-repeat="step in steps">
    <b>{{step.statement}}</b><br>
    <span ng-repeat="question in step.questions">
        <b>{{??????}}</b>  {{question.question}} {{question.response}}<br>
    </span>
</span>

I test with $index+1: 1 2 1 2 3 1 2

I test with $parent.$index+1: 1 1 2 2 2 3 3

but I want 1 2 3 4 5 6 7 ...

Upvotes: 1

Views: 81

Answers (1)

Roy
Roy

Reputation: 1977

You can carry the length of the previous loops forward and add it to the next $index. Like this:

<div ng-init="lastLength=[]">
      <span ng-repeat="step in steps" ng-init="lastLength[$index]=step.questions.length">
            <b>{{step.statement}}</b><br>
            <span ng-repeat="question in step.questions" style="padding-left:50px;">
                <b>{{lastLength[$parent.$index-1]+$index+1}}</b>  {{question.question}} {{question.response}}<br>
            </span>
      </span>
</div>

Working Example:

var app = angular.module('xApp', []).controller('xCtrl', function($scope) {
  $scope.steps = [{
    statement: 'St 1',
    questions: [{
      question: 'q 1',
      response: 'rs 1'
    }, {
      question: 'q 2',
      response: 'rs 2'
    }]
  }, {
    statement: 'St 2',
    questions: [{
      question: 'q 4',
      response: 'rs 4'
    }, {
      question: 'q 5',
      response: 'rs 5'
    }, {
      question: 'q 6',
      response: 'rs 6'
    }]
  }]
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="xApp" ng-controller="xCtrl" ng-init="lastLength=[]">
  <span ng-repeat="step in steps" ng-init="lastLength[$index]=step.questions.length">
        <b>{{step.statement}}</b><br>
        <span ng-repeat="question in step.questions" style="padding-left:50px;">
            <b>{{lastLength[$parent.$index-1]+$index+1}}</b>  {{question.question}} {{question.response}}<br>
        </span>
  </span>
</div>

Upvotes: 2

Related Questions