Creating a Monthly Attendance Report with AngularJs

I need to display employee records in a table format

<link data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2c0cdcdd6d1d6d0c3d28fc1d1d1e2918c918c94">[email protected]</a>" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script src="https://code.angularjs.org/1.5.8/angular.js"></script>
<div ng-app="myApp" ng-controller="MainCtrl">
  <table class="table table-bordered">
    <thead>
      <th>Name</th>
      <th ng-repeat="(key,i ) in getNumber(number) track by $index" ng-data="{{key}}">{{$index+1}}</th>
    </thead>
    <tbody>
      <tr ng-repeat="(key,employee) in emprecords">
        <td>{{employee.name}}</td>
        <td ng-repeat="attendance in employee.attendance track by $index">{{$index+1 === attendance.day ? 'p '+ attendance.day : 'a '+ attendance.day}}</td>
      </tr>
  </table>
</div>
javascriptangularjsangularjs-scope

Answer №1

// This is the JavaScript code snippet

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
 
    $scope.number = 31;
    $scope.getNumber = function (num) {
        return new Array(num);
    };
    
    $scope.emprecords = [
      {
    "id": "1",
    "name": "Franz Ebert",
    "address": "804 Parker Meadows Suite 326\nBryanafurt, VA 07882",
    "phone": "(495) 696-7004 x4828",
    "mobile": "574-670-6661 x966",
    "place": "Lake Nickolas",
    "basic": "5098.00",
    "ta": "846.00",
    "da": "833.00",
    "hra": "743.00",
    "medical": "583.00",
    "total": "918.00",
    "joinDate": "1976-09-28",
    "releavingDate": "1979-03-30",
    "employeeType": "Non Office Staff",
    "photo": "profile.jpg",
    "active": "1",
    "created_at": "2016-10-06 03:53:18",
    "updated_at": "2016-10-06 03:53:18",
    "attendance": [
      {
        "id": "1",
        "employees_id": "1",
        "date": "2015-03-01",
        "present": "1",
        "note": "parayathea poyi",
        "remark": "edited",
        "created_at": "2016-10-06 03:53:42",
        "updated_at": "2016-10-06 06:35:55",
        "day": 1
      },
      {
        "id": "2",
        "employees_id": "1",
        "date": "2015-03-02",
        "present": "0",
        "note": "",
        "remark": "Sequi ut quam recusandae sed delectus harum.",
        "created_at": "2016-10-06 03:53:42",
        "updated_at": "2016-10-06 03:53:42",
        "day": 2
      },
      {
        "id": "3",
        "employees_id": "1",
        "date": "2015-03-03",
        "present": "1",
        "note": "",
        "remark": "Est nihil omnis consectetur ut vel eligendi accusantium voluptas.",
        "created_at": "2016-10-06 03:53:42",
        "updated_at": "2016-10-06 03:53:42",
        "day": 3
      },
      {
        "id": "4",
        "employees_id": "1",
        "date": "2015-03-04",
        "present": "0",
        "note": "",
        "remark": "A at totam autem cumque.",
        "created_at": "2016-10-06 03:53:42",
        "updated_at": "2016-10-06 03:53:42",
        "day": 4
      }
    ]
  }];
});
<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <link data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="23414c4c5750575142530e40505063100d100d15">[email protected]</a>" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <link data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a5855554e494e485b4a7a091409140c">[email protected]</a>" data-semver="3.3.6" rel="stylesheet" href="bootstrap" />
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89e8e7eefce5e8fba7e3fac9b8a7bca7f1">[email protected]</a>" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
  <table class="table table-bordered">
    <thead>
      <th>Name</th>
      <th ng-repeat="(key,i ) in getNumber(number) track by $index" ng-data="{{key}}">{{$index+1}}</th>
    </thead>
    <tbody>
      <tr ng-repeat="(key,employee) in emprecords">
          <td>{{employee.name}}</td>
          

<td  ng-repeat="(key2,i2 ) in getNumber(number) track by $index" ng-data="{{key2}}">{{(($index + 1) == employee.attendance[$index].day && employee.attendance[$index].present == "1") ? 'p' : 'a'}} </td>
      </tr>
  </table>
</body>

</html>

Answer №2

// Here goes the JavaScript code

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
 
    $scope.number = 31;
    $scope.getNumber = function (num) {
        return new Array(num);
    };
    
    $scope.emprecords = [
      {
    "id": "1",
    "name": "Franz Ebert",
    "address": "804 Parker Meadows Suite 326\nBryanafurt, VA 07882",
    "phone": "(495) 696-7004 x4828",
    "mobile": "574-670-6661 x966",
    "place": "Lake Nickolas",
    "basic": "5098.00",
    "ta": "846.00",
    "da": "833.00",
    "hra": "743.00",
    "medical": "583.00",
    "total": "918.00",
    "joinDate": "1976-09-28",
    "releavingDate": "1979-03-30",
    "employeeType": "Non Office Staff",
    "photo": "profile.jpg",
    "active": "1",
    "created_at": "2016-10-06 03:53:18",
    "updated_at": "2016-10-06 03:53:18",
    "attendance": [
      {
        "id": "1",
        "employees_id": "1",
        "date": "2015-03-04",
        "present": "1",
        "note": "parayathea poyi",
        "remark": "edited",
        "created_at": "2016-10-06 03:53:42",
        "updated_at": "2016-10-06 06:35:55",
        "day": 4
      },
      {
        "id": "2",
        "employees_id": "1",
        "date": "2015-03-05",
        "present": "0",
        "note": "",
        "remark": "Sequi ut quam recusandae sed delectus harum.",
        "created_at": "2016-10-06 03:53:42",
        "updated_at": "2016-10-06 03:53:42",
        "day": 5
      },
      {
        "id": "3",
        "employees_id": "1",
        "date": "2015-03-03",
        "present": "1",
        "note": "",
        "remark": "Est nihil omnis consectetur ut vel eligendi accusantium voluptas.",
        "created_at": "2016-10-06 03:53:42",
        "updated_at": "2016-10-06 03:53:42",
        "day": 6
      },
      {
        "id": "4",
        "employees_id": "1",
        "date": "2015-03-04",
        "present": "0",
        "note": "",
        "remark": "A at totam autem cumque.",
        "created_at": "2016-10-06 03:53:42",
        "updated_at": "2016-10-06 03:53:42",
        "day": 7
      }
    ]
  }];
        
    $scope.wasPresent = function (emp, day) {
      for (var i=0, iLen=$scope.emprecords[emp].attendance.length; i<iLen; i++) {
        if ($scope.emprecords[emp].attendance[i].day == day) return true;
      }      
      return false;
    };

});
<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Application</title>
  <link data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3e5c51514a4d4a4c5f4e135d4d4d7e0d100d1008">[email protected]</a>" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <link data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="77151818030403051607374459445941">[email protected]</a>" data-semver="3.3.6" rel="stylesheet" href="bootstrap" />
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bbdad5dcced7dac995d1c8fb8a958e95c3">[email protected]</a>" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
  <table class="table table-bordered">
    <thead>
      <th>Name</th>
      <th ng-repeat="(key, i) in getNumber(number) track by $index" ng-data="{{key}}">{{$index+1}}</th>
    </thead>
    <tbody>
      <tr ng-repeat="(key,employee) in emprecords">
          <td>{{employee.name}}</td>
          <td  ng-repeat="(key2, i2) in getNumber(number) track by $index" ng-data="{{key2}}">{{ wasPresent(key, ($index + 1)) ? 'p' : 'a'}} </td>
      </tr>
  </table>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I have developed a function that adds up price values, but for some reason it is always lagging one step behind

I am facing an issue with my React container that has add and subtract functions. These functions are triggered whenever a user clicks on '+' or '-' spans, to calculate the total 'price' of three different 'products' ...

javascriptreactjsfunctionreact-redux

Load the ajax content only if the specific class matches the given class name "x

I've created the code below with the expectation that it will only load AJAX if the content hasn't already been loaded into the div. Essentially, when I use AJAX to load the content and assign a class name based on which content is currently disp ...

javascriptjqueryajaxclassif-statement

The appearance of the image is distorted once it is inserted into the carousel

I am currently working on a carousel that contains 5 images with varying heights and widths. However, I am experiencing some issues with the way the images are displayed - some are stretched while others are centered within the carousel. My goal is to ens ...

javascriptangularjscarousel

Divide the result by using ajax

In my webpage, I have an input field labeled "Model" with a datalist attribute and a select menu for "Brand". When a user selects an option from the Model input, it should dynamically update the options available in the Brand select menu. Both the Model an ...

phpjavascriptmysqlhtml

Problem with AngularJS route when last slash is missing

My configuration of $routeProvider is as follows: miNgAppplication.config(['$routeProvider', function ($routeProvider) { $routeProvider .when("/", { templateUrl: "Base/FirstPage", controller: "miNgControllerFi ...

angularjsangular-routing

Tips for showcasing retrieved JSON with jQuery's ajax functionality

Below is the jquery code I am working with: $.ajax({ type: "POST", url: "Ajax/getTableRecord", data:{ i : id, t: 'mylist'}, dataType: 'json', success: function(data){ alert(data); ...

javascriptphpjqueryajax

Error encountered while using parameters in Angular service

I have been struggling to pass two variables from an angular service to an MVC controller, but I keep encountering errors. The latest error I'm getting is that 'compName' doesn't exist. I've spent hours trying to debug the issue us ...

javascriptangularjs

Issue with Angular2's Two-Way-Binding functionality has suddenly ceased to work

I'm struggling with updating my view. During ngOnInit, I am resolving a promise. If the HTTP request fails (e.g., due to no internet connection), the catch block should look into local storage to retrieve the user information and display it in the vie ...

javascriptangular

"Angular ng-repeat: Restrict all items from being interacted with, except

I have a collection of items, each wrapped in a div element. I am trying to display only the first item as enabled while disabling the rest. AngularJs angular.module('example', []) .controller('myCtrl', function Ctrl($scope) { $sc ...

javascriptjqueryangularjs

Having difficulty executing the playwright tests

Trying to execute the playwright test from the specified location results in a message prompting to run npm install -D @playwright/test before running the test. Despite having already installed playwright as a dev dependency, the test is still not being ex ...

javascriptnpmplaywright

Numerous memberships for a single assortment within MeteorJS

Currently seeking guidance on the most effective way to accomplish the following task using MeteorJS. The requirements are as follows: a list with items and a sidebar with a selected item (not necessarily from the current page of the list). https://i.sst ...

javascriptmeteor

The server is unable to process the request for /path

After browsing various posts, I am still unable to identify the root cause of my issue. I am developing a donation page for an organization and need to verify if PayPal integration is functioning correctly. The error I am encountering lies between my form ...

javascripthtmlnode.jsforms

Utilizing recorder.js to incorporate audio recording functionality into web2py

I am currently working on a web application where I need to integrate the recorder.js file for audio recording functionality. However, I am facing issues in implementing it within the web2py framework. Can you provide detailed guidance on how to utilize th ...

javascripthtmljsonweb2pybower

Numerous instances of utilizing the identification feature to trigger the opening of a popup dialogue

After following this tutorial, I was able to create a pop-up box with a contact form. However, I am looking for a way to reuse this code in multiple locations without having to change the IDs for each button. If anyone has any advice on how to achieve thi ...

javascriptjquerycsspopup

Issue with handling promise rejection of type error in node.js

Whenever I try running node server.js in Node.js, an error message pops up saying 'Cannot read property 'length' of undefined'. Despite installing all the necessary libraries (such as request) and browsing through various related posts ...

javascriptnode.jsexpressnode-modules

Utilizing jQuery to dynamically convert a dropdown into a multiselect when triggered by the selection of another dropdown within a form containing cloned

After coming across discussions on using a multiselect based on another multiselect, cloning a form row, and dynamically updating select options, it seems there are no answers detailing how to combine all three concepts together. In my particular scenario ...

javascriptjquery

Tips for effectively managing JSON data in Neo4j Cypher

While working on a Node.js application, I discovered that I couldn't use the standard JSON string in my Cypher query: var neo4j = require('neo4j') ,db = new neo4j.GraphDatabase('http://localhost:7474') ,enc_datum = JSON.stri ...

javascriptjsonnode.jsneo4j

Enhancing Select Options with jQuery to Include Default Properties

In this scenario, imagine having a select menu with options in Angular. If I want to attach an array to each option so that when someone selects "Man Haircut," the client-side automatically knows that the price is $10, duration is 30 minutes, and there&apo ...

javascriptjqueryangularjs

Attempting the how-to-npm exercise, however, unable to locate the designated directory for the task

You can access the how-to-npm guide on GitHub by visiting: https://github.com/workshopper/how-to-npm https://i.sstatic.net/nyjrk.png ...

javascriptnpmnpm-install

Using Strapi to showcase images in a React frontend

I am currently in the process of developing a website utilizing Strapi as a Content Management System (CMS) and Next.js with React for the Frontend. The website features an image slider that includes an image, a headline, and a description. While I have su ...

javascriptreactjsnext.jscontent-management-systemstrapi