AngularJS nested ng-repeats in a table

Question

I have a load of data for users' availability by hour for several days in the form:

availData = { "date1":arrayOfUsers, "date2":arrayOfUsers, ... }

arrayOfUsers= [ userArray, userArray, ... ]

userArray= [ "username", "h0", "h1", "h2", ... "h23" ]

I have arrayOfUsers in that form so I can sort them according to their "h0".."h23" values. This all works fine for one view, but I now want to use the same data and create a table containing the following for one selected "username":

date1  h0  h1  h2 ... h23
date2  h0  h1  h2 ... h23
...

So far I can do this which works:

<!-- rows of avail data... -->
<tr ng-repeat="(aDay,aUsers) in allAvailData track by $index">
 <td >{{aDay}}</td>
 <td ng-repeat="aUser in aUsers" ng-show="aUser[0]=='YR005'" >
   <span ng-repeat="hour in aUser track by $index" ng-show="!$first">{{hour}}
   </span>
 </td>
</tr>

giving a 2-column table row: "date" "h0h1h2h3h4"

But what I really want is separate entries... which does not work:

<!-- rows of avail data... -->
<tr ng-repeat="(aDay,aUsers) in allAvailData track by $index">
 <td >{{aDay}}</td>
 <span ng-repeat="aUser in aUsers" ng-show="aUser[0]=='YR005'" >
    <td ng-repeat="hour in aUser track by $index" ng-show="!$first">{{hour}}</td>
 </span>
</tr>

I've not been using angular for very long and I would like to know if this sort of thing is possible rather than just restructuring the data into another array.

Questions are:

Why does the attempt at nesting ng-repeat in not work?
can I nest ng-repeat in another way ?
am I approaching this all wrong ?

Did you consider combining availData, arrayOfUsers and userArray in one data structure? — kubuntu
– kubuntu, Commented Feb 14, 2014 at 13:55
They are all in one data structure - do you mean levelling it? — TonyWilk
– TonyWilk, Commented Feb 14, 2014 at 14:03

Chandermani · Accepted Answer · 2014-02-14 13:57:29Z

2

It should work if you do something like

<tr ng-repeat="(aDay,aUsers) in allAvailData track by $index">
  <td >{{aDay}}</td>
  <td ng-repeat="hour in getSelectedUser() track by $index" ng-show="!$first">{{hour}}</td>
</tr>

Implement getSelectedUser method that returns a single item from a arrayofusers based on your filter logic.

answered Feb 14, 2014 at 13:57

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

TonyWilk Over a year ago

Ah, yes - that avoids my attempt at 3 levels of ng-repeat, thanks

Chandermani Over a year ago

You can also define this selectedUser as a property on you scope, and update it on specific events.

fool4jesus Over a year ago

Only one small tweak: I think it would be better to have it as a scope model rather than a function. Not only are performance problems frequently found to be based on a function called in expressions in the $digest loop, it allows Angular to have a better idea about what it actually has to pay attention to: in the future, it might allow Angular to use Object.observe to make the loop much faster. If it's in a function, without some kind of annotation, it will be hard for Angular to ever divine that.

Collectives™ on Stack Overflow

AngularJS nested ng-repeats in a table

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related