AngularJS和嵌套的JSON和ng-repeat

Question

I have inherited code from another person who is no longer on the project, and I am still working on the paradigm shift to Angular alone (no one here to bounce ideas off of), so have a question for the group.

I am getting JSON that has two nodes that I need to iterate over. The JSON is shown here:

{
    "questions": [
        {
            "text": "Do you plan to attend the session on 6/3 at 12?",
            "choices": [
                {
                    "name": "Answer_9LUL3A",
                    "display": "Yes",
                    "value": "Yes"
                },
                {
                    "name": "Answer_9LUL3A",
                    "display": "No",
                    "value": "No"
                }
            ]
        },
        {
            "text": "When you get the meeting/appointment invite accept it with the Notes client (as opposed to the iDevice)",
            "choices": [
                {
                    "name": "Answer_9NFPMZ",
                    "display": "September 1, 2014 12:00 PM - 01:00 PM",
                    "value": "09/01/2014~12:00:00 PM~01:00:00 PM"
                },
                {
                    "name": "Answer_9NFPMZ",
                    "display": "September 1, 2014 01:00 PM - 02:00 PM",
                    "value": "09/01/2014~01:00:00 PM~02:00:00 PM"
                },
                {
                    "name": "Answer_9NFPMZ",
                    "display": "September 1, 2014 02:00 PM - 03:00 PM",
                    "value": "09/01/2014~02:00:00 PM~03:00:00 PM"
                },
                {
                    "name": "Answer_9NFPMZ",
                    "display": "September 1, 2014 03:00 PM - 04:00 PM",
                    "value": "09/01/2014~03:00:00 PM~04:00:00 PM"
                }
            ]
        }
    ]
}

I need to display the questions.text and underneath it I need to display the questions.choices.display for each question. N number of questions with n number of answers. Like so...

Example:

Q1 How are you?
A1 Feelin' Fine
A2 Fair
A3 Feelin' Bad

Q1 Where are you?
A1 Beach in Bahamas
A2 Broadway in New York
A3 Prison in Leavenworth

What is the best/proper way to use ng-repeat in this case? Should I have one array that contains the question and its answers and have ng-repeats over the parts that I need where I need them, or break it into two arrays (question and answers) and mix/nest the two? The latter seems possibly problematic.

Disclaimer: I am recovering from kidney stone surgery and on pain meds, so I'm having trouble visualizing the right answer. Please don't dog pile, I'm hurting and in a daze.

I thank everyone in advance.

Answer 1

First off, don't apologize at all. Hope you have a quick recovery.

Now, about your question, I've done similar things using a nested ng-repeat approach.

<div ng-controller='QuestionsController as questionList'>
    <div ng-repeat='question in questionList.questions'>
        {{ question.text }}
        <div ng-repeat='choice in question.choices'>
            {{ choice.display }}
        </div>
    </div>
</div>

Of course you would use your custom directives and whatnot. Best of luck in your project.