How can I display a calendar with a complete month view using ng-repeat?

Question

How can I display a calendar with a complete month view using ng-repeat?

I was trying to replicate a table similar to the one shown in this image:

(disregard the styling). I am struggling with how to properly format the data to create a similar table in HTML.

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

I believe there might be something wrong with my data format as I can't seem to get the table right. How should I adjust my data formatting to achieve the desired result?

Just so you are aware, I am retrieving my data through MongoDB's aggregate function.

plunker link

javascript angularjs aggregate

Answer 1

Answer №1

Here is a code snippet that can help you achieve the desired layout:

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

The above code will display the days in th tags, with an additional th before all of the days. If a toddler's day matches the current day, it will show toddler.total; otherwise, it will display 0 using the ng-if directive.

Answer 2

Here is a code snippet that can help you achieve the desired layout:

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

The above code will display the days in th tags, with an additional th before all of the days. If a toddler's day matches the current day, it will show toddler.total; otherwise, it will display 0 using the ng-if directive.

How can I display a calendar with a complete month view using ng-repeat?

Answer №1

Similar questions

extracting a particular value from a JSON object using JavaScript

What is the best way to extract a thumbnail image from a video that has been embedded

Configuring the array interval in an Angular application

Incorporate v-if to target a particular item within a v-for loop

Utilizing npm packages with grunt: A guide

Please ensure that the table is empty before reloading data into it

As soon as I closed the modal, I noticed that the checked inputs reverted back to

Using the debug module, we're able to set up debugging for our Express application with the specific tag "express-locallibrary-tutorial:server". I am curious to understand the purpose and significance of this setup

JS - Activate the ghost element feature by using the preventDefault function

In the JavaScript example provided, do child classes inherit their parent class prototype?

Ignore one specific file when importing all files in Angular 7

Enhance user interactivity on your website by incorporating jQuery and CSS for

Guide to handling multiple forms within a single template using Express

Updating view with *ngIf won't reflect change in property caused by route change

Finding the Closest Element with jQuery's .closest() Method

Struggling to display AJAX GET results on my webpage, although they are visible in the Google Element Inspector

Troubleshooting the malfunctioning array of objects in Angular

Guide on enabling a new input field in React when a dropdown option is selected by a user

Using Jquery colorbox to redirect or forward within the current colorbox container

What is the process for updating a particular div element?