javascript - AngularJS 使用 ng-repeat 迭代多层数组

Question

在迭代具有多层的数组时，我遇到了 ng-repeat 指令的问题。很像 Json 对象，但又不完全一样。

为了构建数组，我使用类似于以下的代码:

$scope.dailyData = []
$scope.dailyData[0] = []
$scope.dailyData[0].push([{"today":null,"day2":1,"day3":null,"day4":null,"day5":null,"day6":null,"day7":null,"title":"Queries Built","id":null}])

这只是程序实际执行的操作的一个示例，我这样做是出于特定原因，该原因可能与问题相关，也可能不相关。

这输出到一个如下所示的数组。

[[[{"title":"Queries Built","today":null,"day2":1,"day3":null,"day4":null,"id":null}]]]

一共有三个数组，中间有一个对象。问题是我似乎无法让 ng-repeat 从对象中提取数据。

我希望它像这样输出:

|     Title     | Today | Yesterday |
| Queries Built |  null |     1     |

但是我在 ng-repeat 上尝试过的所有方法似乎都不起作用。一个这样的例子:

<div ng-repeat="row in dailyData[0]">
    <tr>
        <td>{{row[0]["title"]}}</td>
        <td>{{row["today"]}}</td>
        <td>{{row["day2"]}}</td>
        <td>{{row["day3"]}}</td>
        <td>{{row["day4"]}}</td>
    </tr>
</div>

这里的第一行是与其他行不同的方法，它们都不起作用。

这是一个 fiddle :https://jsfiddle.net/rms9dv8j/2/

Answer 1

主要问题是您使用了 <DIV>标签位于表格中间，这可能就是浏览器没有呈现任何内容的原因。

在这个 fiddle 中:

https://jsfiddle.net/5ox7Ledw/

<div ng-repeat="row in dailyData[0][0]">
    <tr>
        <td>{{row[0]["title"]}}</td>

我简化了数据，将 ng-repeat 移到 TR 元素中，同时删除了错误的 DIV

<tr ng-repeat="row in dailyData">
    <td>{{row.title}}</td>