Доступ к вложенным массивам через ng-repeat

Question

Можно ли перебрать этот массив с помощью ng-repeat?

{
    "classess": [
        "Upper sixth form",
        "Lower sixth form"
        {
            "group": "Year 11",
            "students": [
                "rob",
                "lisa",
                "natalie",
                "greg"
            ]
        },
        {
            "group": "Year 10",
            "students": [
                "tom",
                "ross",
                "james",
                "nicola"
            ]
        }
    ]
}

В идеале было бы здорово отформатировать это так:

- Upper sixth form
- Lower sixth form
- Year 11
    - rob
    - lisa
    - natalie
    - greg
- Year 10
    - tom
    - ross
    - james
    -nicola

Я не могу изменить способ отображения данных. Это можно сделать с помощью ng-repeat или это нужно отфильтровать в контроллере?

Изменить: это то, как мой текущий HTML выглядит

<ul>
    <li ng-repeat="class in classes">
        {{ class }}
        <ul ng-if="class.group">
            <h6>{{ class.group }}</h6>
            <li ng-repeat="student in class.students">
                {{student}}
            </li>
        </ul>
    </li>
</ul>

но это то, что он производит:

- Upper sixth form
- Lower sixth form
- {"group":"Year 11","ingredients":["rob","lisa","natalie","greg"]}
    - Year 11

        rob
        lisa
        natalie
        greg

- {"group":"Year 10","ingredients":["tom","ross","james","nicola"]}
    - Year 10

        tom
        ross
        james
        nicola

Answer 1

Я бы попробовал следовать HTML, чтобы сохранить его компактным и читабельным, без добавления каких-либо элементов HTML, которые на самом деле не имеют цели, например, для стилевого оформления (div в вашем примере):

<ul>
    <li ng-repeat="class in classes">
        {{class.group ? class.group : class}}
        <ul ng-if="class.group">
            <li ng-repeat="student in class.students">
                {{student}}
            </li>
        </ul>
    </li>
</ul>

Answer 2

Использование ng-repeat

Вы можете использовать ng-repeat, если у вас есть циклы. Ваш HTML будет выглядеть следующим образом (при условии, что вы правильно добавили angular и ваш контроллер и т. Д.)

<div ng-repeat="class in classes">
    {{class.group}}
    <div ng-repeat="student in class">
        <p>{{student}}</p>
    </div>
</div>

Возможно, потребуется некоторая настройка, я мог бы сделать это с помощью JSFiddle, но это должно дать вам некоторое представление о том, как получить нужный список.

Answer 3

Мне удалось получить желаемый результат через это:

<ul>
    <li ng-repeat="class in classes">
        <div ng-if="!class.group">
            {{ class }}
        </div>
        <div ng-if="class.group">
            {{ class.group }}
            <ul>
                <li ng-repeat="student in class.students">
                    {{student}}
                </li>
            </ul>
        </div>
    </li>
</ul>