ng-repeat model.array[0].otherArray

Question

This questions is in relation to another question of mine; angularjs-multi-level-tables-inside-another-if-clicked. (You can see "full" JSON there.)

Why can't I have an ng-repeat like below?

<tbody>
<tr data-ng-repeat="dayData in storeDataModel.storedata[0].data">
  <td>{{dayData.date}}</td>
  <td>{{dayData.cost}}</td>
  <td>{{dayData.sales}}</td>
  <td>{{dayData.revenue}}</td>
  <td>{{dayData.employees}}</td>
  <td>{{dayData.employeeHoursSum}}</td>
</tr>
</tbody>

Angular finds the number of objects in the array "dayData" for this particlar "store" (the storedata[0] is the first store) but for some reason it creates n+1 rows instead of n and there's no data at all in any of the rows.

I have also tried a lot of combinations, trying to make it work...:

storeDataModel.storedata.data -returns no rows at all
storeDataModel.storedata.$index.data -returns no rows at all
storeDataModel.storedata.$index+1.data -returns errors
storeDataModel.storedata.$first.data -returns no rows at all

Is what I am trying to do possible at all or do I need to write a directive to get the specific store dayData information and put in a temporary model for that specific store and then do a ng-repeat on the temporary model?

(Also, as I am trying to get this particular table as content to a "fake accordion", i.e. when clicking a row in the parent table to expand/collapse and show this particular table (see my linked question) - are there any non-compatibilities if I include ng-clicked or own directive together with your proposed solution?)

No. I have only posted it here. So it is supposed work to with an array index and then traverse further down? (dayData in storeDataModel.storedata[anyNumberWithinLimitsOfArray].data) — Pixic, Jul 15 '13 at 11:19

Bastien Caudan · Accepted Answer · 2013-07-15T18:12:06.693

2

In ng-repeat, you have to iterate over an array. In your JSON, "data" is an object :

{
  "data": {
     ...
     "dayData" : [
       ...
     ]
   }
 }

So, you have to iterate over "dayData" :

<tbody>
<tr data-ng-repeat="dayData in storeDataModel.storedata[0].data.dayData">
  <td>{{dayData.date}}</td>
  <td>{{dayData.cost}}</td>
  <td>{{dayData.sales}}</td>
  <td>{{dayData.revenue}}</td>
  <td>{{dayData.employees}}</td>
  <td>{{dayData.employeeHoursSum}}</td>
</tr>
</tbody>

You can see it on this fiddle

edited Jul 15 '13 at 18:12

answered Jul 15 '13 at 18:06

Bastien Caudan

4,482
1
17
29

Oh, can't believe I missed that. I know that I have to ng-repeat over an array, just that I missed dayData in the end. Thanks. – Pixic Jul 16 '13 at 09:40

ng-repeat model.array[0].otherArray

1 Answers1