AngularJS nested ng-repeat

Question

I have object which contains question and list of choices. I'm display this object on the page using nested ng-repeats. When I'm trying to change 'question' everything changes just fine, but when I'm trying to change 'choice' nothing happens. Where is the problem?

My page:

<div class="panel">

<div class="row">

    <div class="large-12 columns">

        <h3>{{ title }}</h3>

            <ol>
                <li ng-repeat="q in quiz">
                    <input type="text" ng-model="q.question">
                    <ul class="remove-li-dots">
                        <li ng-model="choice" ng-repeat="choice in q.choices">
                            <input type="text" ng-model="choice" name="answer{{ q.id }}" >
                        </li>
                    </ul>
                    </br>
                </li>
            </ol>
            <a class="button" ng-click="submitQuiz()">Submit</a><br>
            {{ quiz }}
    </div>

</div>

Screenshot of the page:

https://www.dropbox.com/s/i52fwq1os0cvcr9/repeat.png?dl=0

i think you need to put "q.choices" in {{ }}

Lena Bru
– Lena Bru

2014-12-01 14:15:02 +00:00
Commented Dec 1, 2014 at 14:15 — Lena Bru
– Lena Bru, Commented Dec 1, 2014 at 14:15
@Bhojendra - C-Link Nepal how to do it in the right way?

ryche
– ryche

2014-12-01 14:21:31 +00:00
Commented Dec 1, 2014 at 14:21 — ryche
– ryche, Commented Dec 1, 2014 at 14:21

Bogdan Savluk · Accepted Answer · 2014-12-01 14:42:01Z

1

Problem is that choice is a string, so when you are changing it in child scope it is changing only in child scope.

To fix this - reference it by index in array ng-repeat="(choiceIndex,choice) in q.choices,ng-model="q.choices[choiceIndex]".

Also to prevent inputs from loosing focus when changing items - you will need to add track by $index in ng-repeat directive.

<ol> <li ng-repeat="q in quiz"> <input type="text" ng-model="q.question"> <ul class="remove-li-dots"> <li ng-model="choice" ng-repeat="(choiceIndex,choice) in q.choices track by choiceIndex"> <input type="text" ng-model="q.choices[choiceIndex]" name="answer{{ q.id }}"> </li> </ul> </li> </ol>

working example: http://plnkr.co/edit/GJacjkzfT4FpfC6szsNk?p=preview

For better understanding how angular scopes works, I recommend reading this: https://github.com/angular/angular.js/wiki/Understanding-Scopes

edited Dec 1, 2014 at 14:42

answered Dec 1, 2014 at 14:36

Bogdan Savluk

6,3121 gold badge32 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bogdan Savluk Over a year ago

updated an answer for case when using dictionary instead of array, or using filters to arrange items(using $index for this purpose, was incorrect)

ryche Over a year ago

Thanks a lot for a detailed answer! I'm new to js and angular seems to me a bit confusing

Collectives™ on Stack Overflow

AngularJS nested ng-repeat

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related