CODEWITHSUNDEEP
javascriptangularjsjsonangularjs-ng-repeat
jcobo1
jcobo1

Reputation: 1170

Nested ng-repeat on angular is not working

I'm using an ng-repeat to show the sections of a form, inside every section I must show the questions so I'm using one nested ng-repeat but I don't know how to show (or why not shows) the values.

This is a sample json I'm workin with:

{
    "section": [{
        "name": "Seccion 1",
        "questions": [{
            "statement": "Primera pregunta",
            "id": 1
        }, {
            "statement": "Pregunta 3",
            "id": 3
        }, {
            "statement": "Pregunta 4",
            "id": 4
        }],
        "id": 1
    }, {
        "name": "Seccion 2",
        "questions": [{
            "statement": "Segunda pregunta",
            "id": 2
        }],
        "id": 2
    }]
}

And this is my view:

<div class="panel panel-default" ng-repeat="section in questionsTest track by $index">
    <div class="panel-heading">
        <h1>{{ section.name  }}</h1>
        <h3 class="panel-title">{{ section.name }}. {{ section.id }}</h3>
    </div>
    <div class="panel-body" ng-repeat="question in questions.section.questionsTest track by $index">
        {{ question[$index].statement }} <!-- .statement -->
    </div> 
</div>

Questionstest is where I store the json form the web service in the controller. On this case I use a different json structure than in other questions

Upvotes: 0

Views: 134

Answers (2)

digit
digit

Reputation: 4565

try this. 

<div class="panel panel-default" ng-repeat="section in questionsTest">
    <div class="panel-heading">
        <h1>{{ section.name  }}</h1>
        <h3 class="panel-title">{{ section.name }}. {{ section.id }}</h3>
    </div>
    <div class="panel-body" ng-repeat="question in section.questions">
        {{ question.statement }} <!-- .statement -->
    </div> 
</div>

Upvotes: 1

haxxxton
haxxxton

Reputation: 6442

The second ng-repeat appears to be trying to loop over a non-existent variable. Given you're inside the loop for the section you should change your second repeat to something like:

<div class="panel-body" ng-repeat="question in section.questions track by $index">
    {{ question.statement }} <!-- .statement -->
</div>

Upvotes: 1

Related Questions