AngularJS使用ng-repeat遍历多层数组

Question

I have an issue with the ng-repeat directive when it comes to iterating through an array with multiple layers. Much like a Json object but not quite.

To build the array I use code akin to this:

$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}])

This is just a sample of what the program actually does, and I do it this way for a specific reason that may or may not be relevant to the question.

This outputs to an array that looks like this.

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

There are three arrays and an object in the middle. The problem is I can't seem to get the ng-repeat to pull the data from the object.

I want it to output like this:

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

But everything I've tried on ng-repeat doesn't seem to work. One such example:

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

The first row in here is a different method from the others, neither of them works.

Here's a fiddle: https://jsfiddle.net/rms9dv8j/2/

Answer 1

I think you need to restructure your data so that it is in a better format.

You will need to do a nested loop similar to what I've done in this 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>

More helpful information can be found in this post:

Nested ng-repeat

Answer 2

The main problem is that you used a <DIV> tag in the middle of the table, which is probably why the browser didn't render anything.

In this fiddle:

https://jsfiddle.net/5ox7Ledw/

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

I simplified the data and moved the ng-repeat into the TR element, while also deleting the erroneous DIV

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