通过 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

使用 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 2

我设法通过这个获得了想要的输出：

<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>

Answer 3

我会尝试遵循 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>

通过 ng-repeat 访问嵌套数组

Accessing nested arrays through ng-repeat

angularjs

ng-repeat