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

AngularJS iterating through a multi-layered array with ng-repeat

本文关键字：数组 迭代 使用 ng-repeat AngularJS      更新时间：2023-09-26

我对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/

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

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

我认为你需要重新构造你的数据，以便它是一个更好的格式。

你需要做一个嵌套循环，类似于我在这个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>

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

嵌套ng-repeat

相关文章：