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>

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

这是一个小提琴：https://jsfiddle.net/rms9dv8j/2/

Answer 1

我认为您需要重新构建数据，以使其格式更好。

您需要执行类似于我在此plnkr中所做的嵌套循环：http://plnkr.co/edit/CqUHwj?p=info

<div ng-app="module" ng-controller="ctrl">
  <div ng-repeat="row in array">
     {{row.name}}
     <div ng-repeat="row2 in row.array2">
       {{row2.name}}
     </div>
  </div>
</div>

更多有用的信息可以在这篇文章中找到：

Nested ng-repeat

Answer 2

主要问题是您在表格中间使用了<DIV>标记，这可能是浏览器无法渲染任何内容的原因。

在这个小提琴中：

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>

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

2 个答案: