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元素，例如：用于样式化（在您的示例中为if-else）：

div

Answer 2

使用ng-repeat

如果你掌握了循环，你可以使用ng-repeat。您的HTML将如下所示（假设您已正确添加角度和控制器等）

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

通过ng-repeat访问嵌套数组

3 个答案: