CODEWITHSUNDEEP
javascriptangularjsaggregate
nur farazi
nur farazi

Reputation: 1207

Table with full month view with ng-repeat?

wanted to create a table just like this enter image description here

(ignore the styling). i got confuse how to formate the data to make this table in html.

$scope.toddlers = [
{
  "name": "a",
  "day": 1,
  "total": 3
},
{
  "name": "b",
  "day": 2,
  "total": 4
},
{
  "name": "c",
  "day": 4,
  "total": 1
}
];

i think i need to change my data format or something i just can't make this table right. how should i format my data to give this result.

FYI: i am getting my data by using mongodb aggregate.

plunker link

Upvotes: 1

Views: 54

Answers (1)

31piy
31piy

Reputation: 23859

This snippet can produce the layout which you're desiring of:

<table border="1">
  <tr>
    <th></th>
    <th ng-repeat="day in days">{{day}}</th>
  </tr>
  <tr ng-repeat="toddler in toddlers">
    <td>{{toddler.name}}</td>
    <td ng-repeat="day in days">
      <span ng-if="toddler.day === day">{{toddler.total}}</span>
      <span ng-if="toddler.day !== day">0</span>
    </td>
  </tr>
</table>

It first repeats the days in th, with one extra th before all of days. Then if current toddler's day matches the current day, it shows toddler.total, otherwise 0 using ng-if directive.

Upvotes: 1

Related Questions