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

Issues with Autofocus in AngularJs on Firefox

Leveraging Node.js to establish a connection between two pug files

execute a setTimeout function in ReactJs to render a component after a specified amount of time

Making Node.js Wait Until a Function Completes its Execution

Uncovering the source of glitchy Angular Animations - could it be caused by CSS, code, or ng-directives? Plus, a bonus XKCD comic for some light-hearted humor

Setting the outcome of an Ajax call as a global variable in JavaScript

The Ionic framework has a defined variable

What is the best way to fetch the title property from my Campaign Contract for displaying it in the render method?

What is the best way to display table rows for a specified date range?

JavaScript: Implementing a for loop to dynamically adjust CSS properties

Animate the parent container of ng-view in Angular by targeting an element within ng-view

Having difficulty placing a marker on Google Maps

Utilize VUE NPM to add imported packages to all remaining files

What steps should I take to fix an error in my code?

Scaling down the screen for a smaller display

Exploring the application of javascript method within a Vue template

Tips on ensuring that the Angular frontend waits for the response from an Express REST call

What is the best way to implement an automatic logout feature in asp.net that will log out my site after 10 minutes of inactivity?

A guide on identifying the data type of a value entered into an HTML table using JavaScript

Choose a variety of table rows based on the values of the data attributes that are