javascript - 使用 Angular 循环遍历数组中的数组

Question

开发 TODO 应用程序来学习 Angular。我有这个硬编码数组作为“数据库”，我想在 View 中显示任务。

var taskLists = [

    {name: 'Todays todo', id: '1', tasks:['Make coffe', 'another task']},
    {name: 'Tomorrow i will do this', id: '2', tasks:['Code well', 'go to bed']}

];

那么我如何在 Angular View 中迭代数组内的数组？ 我尝试过两次 ng-repeats，但无法让它正常工作。我想将任务一一显示为 <td> ，而不仅仅是整个任务数组 <td>就像现在一样 ['煮咖啡'，'另一项任务']

这就是 View 的样子。

<h2 ng-repeat="object in list">{{object.name}}</h2>
<table>
    <thead>
        <tr>Tasks</tr>
    </thead>
    <tr>
        <td ng-repeat="task in list">{{task.tasks}}</td>
    </tr>
</table>

Answer 1

你的逻辑有问题。

首先，子级的 HTML 标记必须位于父级内。

<div class="parent" ng-repeat="object in list">
    <h2>{{object.name}}</h2>
    <table>
        <thead>
            <tr>Tasks</tr>
        </thead>
        <tr ng-repeat="task in object.tasks">
            <td>{{item}}</td>
        </tr>
    </table>
</div>

尝试一下并检查它是否有效。