CODEWITHSUNDEEP
javascripthtmlangularjs
TonyWilk
TonyWilk

Reputation: 1477

AngularJS nested ng-repeats in a table

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:

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

Upvotes: 0

Views: 5776

Answers (1)

Chandermani
Chandermani

Reputation: 42669

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.

Upvotes: 2

Related Questions